Таблицы

Лекция

Другие гайдлайны «Альпари» — в лекции «Экранная вёрстка»

Это гайдлайны «Альпари», посвящённые таблицам. Сначала даны общие рекомендации в виде текста, а потом показано, как может выглядеть таблица на сайте:

Другие гайдлайны «Альпари» — в лекции «Экранная вёрстка»

Три главные вещи

Сначала — три главных знания о таблицах.

Во‑первых, таблицу не нужно тянуть в ширину. Здесь таблица компактная: хоть есть много места до конца макета, но дизайнер оставил таблицу той ширины, которая ей нужна. Часто дизайнеры на автопилоте пишут в ХТМЛ ‹table width=100%›, чтобы таблица растянулась на всю ширину макета. Таблица становится нечитаемой, потому что между колонками возникают дополнительные отступы, которые не нужны. Человеку становится трудно следить глазами за тем, какие из элементов таблицы составляют одну строку. А строка — это всё‑таки единица смысла таблицы, она должна быть как можно более собранной.

Это не противоречит идее резиновой вёрстки, когда сайт подстраивается под ширину браузера. Относиться к таблице следует как к иллюстрации: вы же не станете растягивать фотографию человека в ширину.

В таблице нужно добиваться того, чтобы ширина была как можно меньше и чтобы данные в неё комфортно влезали. Это естественная для неё ширина. Небольшие отступы между колонками нужны, чтобы мы их считывали как отдельные колонки.

🔒 Подпишитесь, чтобы смотреть лекцию

Когда что выйдет

Оставьте почту, чтобы узнать о выходе лекций и обновлениях других продуктов бюро.

Подписка

КПД ❔
32 дизайнеру, 24 редактору и руководителю