Табличное представление

Прежде всего разберемся, что такое таблица, чем она отличается от сплошного текста и от списка.

Текст, список, таблица

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

Рассмотрим пример. Вы пошли в магазин и купили нектарины за 452 ₽, персики за 205 ₽, голубику за 276 ₽, артишоки за 467 ₽, киш за 189 ₽, индейку за 273 ₽, салат-боул за 270 ₽, чай за 117 ₽, кефир за 85 ₽ и пакет за 20 ₽.

Воспринимать предыдущий абзац очень сложно. Чтобы легче читалось, превратим текст в список:

Нектарины 452 ₽
Персики 205 ₽
Голубика 276 ₽
Артишоки 467 ₽
Киш 189 ₽
Индейка 273 ₽
Салат-боул 270 ₽
Чай 117 ₽
Кефир 85 ₽
Пакет 20 ₽

Так намного лучше, но в списке по-прежнему два вида данных — покупки и цены, а измерение только одно — вертикальное. Числа смешиваются с текстом, их сложно сравнить и, например, посчитать сумму. Ситуация изменится, если вынести покупки и цены в разные колонки:

Покупки
Цена, ₽
Нектарины
452
Персики
205
Голубика
276
Артишоки
467
Киш
189
Индейка
273
Салат-боул
270
Чай
117
Кефир
85
Пакет
20
Потрачено
2354

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

Возьмем пример посложнее. Предположим, ваша кошка заболела, и ветеринар прописал курс лечения:

Разобраться в таком тексте нелегко, все данные в кучу 😿 Самое простое, что можно сделать, — убрать то, что и так есть в инструкциях к препаратам:

Выглядит аккуратно, но на практике неудобно. Вернемся к оригиналу и переделаем его в таблицу. Разместим препараты в строках, а рекомендации по их применению — в колонках:

А теперь превратим таблицу в бланк, который врачу будет удобно заполнять на компьютере или от руки, а вам — читать:

Добавим шапку и заполним бланк от руки, чтобы проверить, умещается ли текст:

Псевдотаблица

Не всякий текст, разбитый на колонки и строки, можно назвать таблицей. Если пользоваться данными не проще, чем в сплошном тексте, перед вами псевдотаблица:

Информация о кредитах здесь сгруппирована по банкам, но не сгруппирована по условиям кредитов. Из-за этого сложно сравнить, например, процентную ставку в разных банках.

Проанализируем структуру таблицы, это подскажет правильную компоновку (наведите курсорнажмите на названия, и элементы подстветятся в таблице):

А теперь сделаем из псевдотаблицы настоящую:

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

Из чего состоит таблица

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

Элементы таблицы имеют свои названия: заголовок, шапка (головка), боковик и прографка. Данные располагаются в ячейках, которые образуют горизонтальные строки (ряды) и вертикальные колонки (столбцы, графы).

ГЛАВА 2