{
    "version": "https:\/\/jsonfeed.org\/version\/1",
    "title": "Кирилл Беляев: заметки с тегом компактность",
    "_rss_description": "о подаче информации, айдентике, интерфейсах и жизненной среде",
    "_rss_language": "ru",
    "_itunes_email": "",
    "_itunes_categories_xml": "",
    "_itunes_image": "",
    "_itunes_explicit": "",
    "home_page_url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=tags\/kompaktnost\/",
    "feed_url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=tags%2Fkompaktnost%2Fjson%2F",
    "icon": "https:\/\/kirillbelyaev.com\/ru\/blog\/user\/userpic@2x.jpg?1662385101",
    "author": {
        "name": "Кирилл Беляев",
        "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/",
        "avatar": "https:\/\/kirillbelyaev.com\/ru\/blog\/user\/userpic@2x.jpg?1662385101"
    },
    "items": [
        {
            "id": "614",
            "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/sealing-columns-in-table\/",
            "title": "Уплотнение столбцов в таблице",
            "content_html": "<p>Таблицы удобнее читать, когда столбцы стоят плотно и взгляд не перепрыгивает большие дыры, идя по строке. Второй плюс узких столбцов — их больше влезает в ширину экрана. Особенно это актуально в информационно насыщенных таблицах. Часто узкому содержанию мешают широкие заголовки, как в столбцах Е и F :<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/excel@2x.gif\" width=\"512\" height=\"384\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><a href=\"https:\/\/www.cs.umd.edu\/hcil\/academics\/courses\/fall1999\/cmsc838s\/Project\/wmk\/paper\/node13.html\">Скриншот с сайта университета Мэриленда<\/a><\/div>\n<\/div>\n<p>Столбцы А...F за 1990-й. Год можно вынести на строку выше и не повторять шесть раз. Этого хватит, чтобы сузить столбцы, но если оставшиеся заголовки будут длиннее подойдёт следующий приём. Показывать буду на таком кусочке:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/table-incompact@2x.png\" width=\"323\" height=\"215\" alt=\"\" \/>\n<\/div>\n<p>Повторюсь: приём подойдет только для случаев, когда столбцы связаны по смыслу. Сначала собираю заголовки в один через запятую. И сбиваю содержание плотнее:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/table-combined-columns@2x.png\" width=\"155\" height=\"235\" alt=\"\" \/>\n<\/div>\n<p>Заголовки связаны со столбцами только порядковым положением. Такой связи бывает недостаточно. Поэтому усиливаю связь цветом. Достаточно одного не крайнего столбца на каждые три-четыре столбца. Красить лучше со смыслом, но можно и механически через один:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/table-combined-color-columns@2x.png\" width=\"370\" height=\"235\" alt=\"\" \/>\n<\/div>\n<p>Теперь нужно придумать, что делать с сортировкой. У исходной таблицы заголовки могли быть кликабельными. Теперь так не получится.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/table-sorting@2x.png\" width=\"323\" height=\"215\" alt=\"\" \/>\n<\/div>\n<p>Добавляю линейку, отделяющую содержание от заголовка. Режу её на кусочки по ширине каждого столбца делаю повыше и превращаю в кнопки:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/table-combined-columns-sorting@2x.png\" width=\"585\" height=\"252\" alt=\"\" \/>\n<\/div>\n<p>Тестируйте перед внедрением.<\/p>\n",
            "date_published": "2018-01-26T13:19:31+03:00",
            "date_modified": "2018-01-26T20:45:41+03:00",
            "image": "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/excel@2x.gif",
            "_date_published_rfc2822": "Fri, 26 Jan 2018 13:19:31 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "614",
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/excel@2x.gif",
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/table-incompact@2x.png",
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/table-combined-columns@2x.png",
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/table-combined-color-columns@2x.png",
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/table-sorting@2x.png",
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/table-combined-columns-sorting@2x.png"
                ]
            }
        }
    ],
    "_e2_version": 3572,
    "_e2_ua_string": "E2 (v3572; Aegea)"
}