Когда таблицы уместны

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

Таблицу используют только для табличных данных — информации, у которой есть строки и столбцы.

Для чего таблицы созданы

Таблица уместна, когда данные естественно ложатся в сетку «строки × столбцы» и их удобно сравнивать. Примеры:

• расписание занятий (день / предмет / время);
• прайс-лист (товар / цена / наличие);
• статистика (показатель / значение по годам);
• сравнение тарифов.

Признак простой: если вы мысленно рисуете шапку столбцов — это табличные данные, и таблица подходит идеально.

Историческая ошибка: вёрстка таблицами

Когда-то, на заре веба, CSS был слабым, и разработчики строили весь макет страницы таблицами: шапка сайта, меню сбоку, контент, подвал — всё запихивали в гигантскую таблицу с невидимыми границами. Сегодня так делать нельзя.

Почему вёрстка таблицами — плохо

• Доступность. Программа чтения с экрана пытается читать таблицу как данные («строка 1, столбец 2…») и запутывает незрячего пользователя.
• Адаптивность. Табличный макет тяжело подстроить под экран телефона.
• Сложность кода. Вложенные таблицы превращаются в нечитаемую кашу.
• Семантика. Таблица «врёт» о смысле: это не данные, а раскладка блоков.

Чем верстать макет вместо таблиц

Расположение блоков на странице — задача CSS. Для этого есть современные инструменты — Flexbox и Grid, которые вы изучите в курсе по CSS. А структуру страницы задают семантические теги (<header>, <nav>, <main>, <footer>) — им посвящён последний раздел этого курса.

Как проверить себя

Перед тем как выбрать таблицу, задайте себе один вопрос: «Будь у этих данных шапка столбцов, какой бы она была?» Если ответ приходит легко — «Товар / Цена / Наличие», «День / Температура» — перед вами настоящие табличные данные, и таблица уместна. Если же придумать осмысленную шапку не получается, а вы просто хотите расположить блоки рядом — это вёрстка, и таблица здесь не нужна.

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

Итог

• Таблицы — только для табличных данных (строки и столбцы, которые сравнивают).
• Верстать макет страницы таблицами нельзя: страдают доступность, адаптивность и читаемость.
• Расположение блоков — задача CSS, структуру задают семантические теги.