Таблицы

Лекция

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

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

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

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

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

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

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

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

🔒 Запишитесь на курс, чтобы участвовать

Когда в следующий раз откроется запись

Оставьте почту, чтобы узнать, когда будет открыта запись на этот и другие курсы.

Запись на курс закрыта

Студенты дневных и вечерних отделений получают скидку 50 %.

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