Вёрстка таблиц: базовая гигиена

Антон Досыбиев

На большинство таблиц в интернете больно смотреть. Люди, которые их верстают, стараются сделать «красиво», но дизайн мешает нормально считывать информацию.

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

Учиться будем на примере. По запросу «таблица» Гугл выдаёт мегатонну плохо сверстанных табличек. Я выбрал пример попроще, чтобы объяснить основные принципы.


Документ рассказывает о бронетехнике на вооружении СССР времён Великой Отечественной войны. Приступаем.

Убираем заливку

Первое, что пугает в таблице — цветная заливка. Она тут не нужна, потому что не помогает нормально считывать надписи: человеческому глазу привычней читать чёрные буквы на белом фоне. Не зря ведь страницы в книгах белые, а буквы — чёрные. Страница, которую вы сейчас читаете, тоже белая. Если опубликовать текст в Фейсбуке, у него будет белый фон.

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

А иногда цвет заливки вынуждает верстальщика изменить цвет текста. Не надо так.

Если дизайн бесполезен — выбрасываем.


Без заливки таблица уже не кричит на читателя. Теперь это серьёзный документ, в котором главное — содержание. Идём дальше.

Избавляемся от линеек

Раскрываю секретный секрет: таблицам не нужны границы ячеек. Многие верят, что линейки помогают визуально разделять строки и столбцы, но в таблице всё и так разделено отступами. Посмотрите на абзацы в этой статье. Между ними нет линеек, но вы понимаете, что это разные абзацы, потому что они разделены отступами.

Ещё одна причина отказаться от линеек — это мельтешение и лишний шум. Если смотреть на разлинованную таблицу несколько секунд, это не заметно, а если минуту — глаза устают, линейки мерцают. Попробуйте глазами посчитать количество строк в такой таблице — и через минуту вы прослезитесь.

Дизайнеры называют это эффектом «1 + 1 = 3». Такая синергия: если вы нарисуете на белом листке две параллельные чёрные линии, то у вас получится не две линии, а три — две чёрные и одна белая между ними. Отсюда и мельтешение.

Удалям границы ячеек, чтобы позаботиться о глазах.


Теперь кажется, что таблица выглядит неаккуратно. Займёмся этим.

Ровняем цифры

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

Чтобы облегчить этот процесс, лучше выравнивать цифры по правому краю ячейки. Там мы сразу видим, где сотни, где тысячи, а где десятки тысяч.


Заголовки ровняем так же, как и содержание столбцов, к которым они относятся.

Добавляем отступы и подзаголовки

В первом шаге мы избавились от заливки, которую автор таблицы использовал, чтобы структурировать документ. Теперь вернём структуру, но сделаем это не с помощью цвета, а отступами и жирными подзаголовками.

Вместо скромной надписи «СССР» вверху напишем нормальный заголовок для всей таблицы. Подразделы внутри отдалим друг от друга, а подзаголовки выделим жирным.


Чтобы заголовок последнего раздела поместился в одну строку, я его сократил:

  • машины специального назначения → машины спецназначения.

На следующем шаге мы визуально сократим документ.

Объединяем разделы

Чем компактней таблица, тем лучше. Главное — не потерять часть данных, когда сокращаете документ.

Я не разбираюсь в бронетехнике и могу ошибаться, но кажется, что «малые танки и танкетки» не обидятся, если я помещу их в раздел «Танки и полевая артиллерия», ведь в обоих случаях речь идёт в том числе о танках. Из тех же соображений переношу «самоходную артиллерию».


В итоге вместо пяти подзаголовком остались три. Таблица уменьшилась, не растеряв важные данные.

Окей, возвращаем одну линейку

Единственная линейка, которая имеет право на существование, это нижняя граница верхних ячеек. С ней таблица выглядит как таблица даже издалека.


Заодно я добавил «Всего» в конце каждого раздела. Сравните первый вариант и последний.


Есть ещё примерно миллион способов улучшить вёрстку таблицы: вынести часть информации за документ, перевернуть таблицу из горизонтального положения в вертикальное, объединить или вынести за скобки повторяющиеся данные. Если интересно, дайте знать — расскажу о продвинутых техниках в следующих статьях.

Что запомнить
1. Не заливайте таблицу цветом. Нет, сереньким тоже не надо.

2. Уберите границы ячеек. В интернете таблицы прекрасно смотрятся и без них, а в Икселе уже есть сетка — красить её ещё жирнее бессмысленно.

3. Ровняйте цифры по правому краю ячейки, а текст по левому. Заголовки столбцов выравниваем так же, как и содержание этих столбцов.

4. Выделяйте подзаголовки жирным. Над подзаголовком оставляйте пустую строку, чтобы добавить отступа между разделами.

5. Старайтесь сделать таблицу настолько компактной, насколько это возможно. Не жертвуйте важными данными.

Поделиться
Отправить
Запинить

Рассылка статей по почте. Раз в неделю, без спама.

Популярное
5 комментариев
Маслова Екатерина

Здорово! Красивая и удобная таблица получилась.

Lucyko

Строки нужно через одну залить довольно светлым тоном — иначе сложно понять что к чему относится.

Антон Досыбиев

Lucyko, любая чересполосица рано или поздно мерцает в глазах. Если таблица сильно широкая, её можно перевернуть и сделать вертикальной. Тогда путаницы не будет. В интернете строки в таблице можно подсвечивать при наведении, но раскрашивать навсегда не советую.

Lucyko

«В интернете» — понятие абстрактное. Если это онлайн-таблица и есть возможность добавить подсвечивание при наведении — это гуд. Но очень часто таблицы идут в статьях в виде статичных скринов и приходится читать, как есть. По поводу заливки тоном — я имею в виду самые светлые, еле заметные тона.

Екатерина Головатюк

За свою консультантскую жизнь я сделала сотни таблиц с заливками, ячейками и прочим.
Самой на них смотреть было неуютно, но что с этим сделать, я тогда не знала.
Теперь начинаю узнавать. Спасибо, Антон!
Да, очень здорово было бы изучить ещё примерно миллион способов улучшения вёрстки таблиц.

Ваш комментарий
адрес не будет опубликован

ХТМЛ не работает

Ctrl + Enter