редактор Ольги Шевченко

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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