На большинство таблиц в интернете больно смотреть. Люди, которые их верстают, стараются сделать «красиво», но дизайн мешает нормально считывать информацию.
Сегодня я покажу вам пару базовых правил. Следуйте им, если хотите, чтобы ваши таблицы выглядели чистенько, а информация в них легко читалась.
Учиться будем на примере. По запросу «таблица» Гугл выдаёт мегатонну плохо сверстанных табличек. Я выбрал пример попроще, чтобы объяснить основные принципы.
Документ рассказывает о бронетехнике на вооружении СССР времён Великой Отечественной войны. Приступаем.
Убираем заливку
Первое, что пугает в таблице — цветная заливка. Она тут не нужна, потому что не помогает нормально считывать надписи: человеческому глазу привычней читать чёрные буквы на белом фоне. Не зря ведь страницы в книгах белые, а буквы — чёрные. Страница, которую вы сейчас читаете, тоже белая. Если опубликовать текст в Фейсбуке, у него будет белый фон.
Если дизайн бесполезен — выбрасываем.
Без заливки таблица уже не кричит на читателя. Теперь это серьёзный документ, в котором главное — содержание. Идём дальше.
Избавляемся от линеек
Раскрываю секретный секрет: таблицам не нужны границы ячеек. Многие верят, что линейки помогают визуально разделять строки и столбцы, но в таблице всё и так разделено отступами. Посмотрите на абзацы в этой статье. Между ними нет линеек, но вы понимаете, что это разные абзацы, потому что они разделены отступами.
Ещё одна причина отказаться от линеек — это мельтешение и лишний шум. Если смотреть на разлинованную таблицу несколько секунд, это не заметно, а если минуту — глаза устают, линейки мерцают. Попробуйте глазами посчитать количество строк в такой таблице — и через минуту вы прослезитесь.
Дизайнеры называют это эффектом «1 + 1 = 3». Такая синергия: если вы нарисуете на белом листке две параллельные чёрные линии, то у вас получится не две линии, а три — две чёрные и одна белая между ними. Отсюда и мельтешение.
Удалям границы ячеек, чтобы позаботиться о глазах.
Теперь кажется, что таблица выглядит неаккуратно. Займёмся этим.
Ровняем цифры
Таблицы нужны нам, чтобы сравнивать данные. Делать это в сплошном тексте мучительно: придётся прыгать между абзацами, выискивать цифры, запоминать. В таблице цифры уже рассортированы и записаны в столбик — сравнивать их удобнее.
Чтобы облегчить этот процесс, лучше выравнивать цифры по правому краю ячейки. Там мы сразу видим, где сотни, где тысячи, а где десятки тысяч.
Заголовки ровняем так же, как и содержание столбцов, к которым они относятся.
Добавляем отступы и подзаголовки
В первом шаге мы избавились от заливки, которую автор таблицы использовал, чтобы структурировать документ. Теперь вернём структуру, но сделаем это не с помощью цвета, а отступами и жирными подзаголовками.
Вместо скромной надписи «СССР» вверху напишем нормальный заголовок для всей таблицы. Подразделы внутри отдалим друг от друга, а подзаголовки выделим жирным.
Чтобы заголовок последнего раздела поместился в одну строку, я его сократил:
- машины специального назначения → машины спецназначения.
На следующем шаге мы визуально сократим документ.
Объединяем разделы
Чем компактней таблица, тем лучше. Главное — не потерять часть данных, когда сокращаете документ.
Я не разбираюсь в бронетехнике и могу ошибаться, но кажется, что «малые танки и танкетки» не обидятся, если я помещу их в раздел «Танки и полевая артиллерия», ведь в обоих случаях речь идёт в том числе о танках. Из тех же соображений переношу «самоходную артиллерию».
В итоге вместо пяти подзаголовком остались три. Таблица уменьшилась, не растеряв важные данные.
Окей, возвращаем одну линейку
Единственная линейка, которая имеет право на существование, это нижняя граница верхних ячеек. С ней таблица выглядит как таблица даже издалека.
Заодно я добавил «Всего» в конце каждого раздела. Сравните первый вариант и последний.
Есть ещё примерно миллион способов улучшить вёрстку таблицы: вынести часть информации за документ, перевернуть таблицу из горизонтального положения в вертикальное, объединить или вынести за скобки повторяющиеся данные. Если интересно, дайте знать — расскажу о продвинутых техниках в следующих статьях.
Что запомнить
- Не заливайте таблицу цветом. Нет, сереньким тоже не надо.
- Уберите границы ячеек. В интернете таблицы прекрасно смотрятся и без них, а в Икселе уже есть сетка — красить её ещё жирнее бессмысленно.
- Ровняйте цифры по правому краю ячейки, а текст по левому. Заголовки столбцов выравниваем так же, как и содержание этих столбцов.
- Выделяйте подзаголовки жирным. Над подзаголовком оставляйте пустую строку, чтобы добавить отступы между разделами.
- Старайтесь сделать таблицу настолько компактной, насколько это возможно. Не жертвуйте важными данными.
