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

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

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

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

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

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

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

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

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

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

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

• Увеличим ширину колонок и высоту строк.
• Добавим линейки.
• Предусмотрим чекбоксы для отметки препаратов, которые продаются только в ветеринарных аптеках.

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

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

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

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

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

• Вид кредита, валюта и первый взнос одинаковые у всех банков.
• Ставка и срок кредитования указаны для всех банков, но их значения различаются.
• Срок обращения и выдачи есть только у двух банков.

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

• Перенесем в заголовок общие для всех банков данные о виде кредита, валюте и первом взносе.
• Выделим по отдельной колонке для условий, которые различаются.

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

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

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

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