Когда таблица, а когда список
| Содержимое | Подходящий формат | Пример |
|---|---|---|
| Последовательность шагов | Нумерованный список | Инструкция по настройке |
| Перечень равноправных пунктов | Маркированный список | Признаки проблемы |
| Сравнение по нескольким параметрам | Таблица | Сравнение тарифов |
| Соответствие «термин — значение» | Список определений или таблица из двух столбцов | Глоссарий |
| Оформление страницы в колонки | Ни то, ни другое: стили | Вёрстка макета |
Разметка таблиц
Таблица нужна для данных, а не для расположения блоков на странице. Правильная структура включает заголовки столбцов и, при необходимости, подпись:
<table>
<caption>Сравнение тарифов</caption>
<thead>
<tr><th scope='col'>Тариф</th><th scope='col'>Цена</th></tr>
</thead>
<tbody>
<tr><td>Базовый</td><td>500</td></tr>
</tbody>
</table>- Заголовки
thотделяют названия столбцов от данных: их использует и поисковая система, и программы экранного доступа. - Подпись
captionобъясняет, о чём таблица. - Единицы измерения указывают в заголовке, а не в каждой ячейке.
Разметка списков
- Нумерованный список
ol— когда порядок важен, маркированныйul— когда нет. - Каждый пункт — отдельный элемент
li, а не строка с переносом внутри абзаца. - Пункты строятся одинаково: все начинаются с глагола или все — с существительного.
- Не используйте списки для вёрстки меню: для навигации есть отдельный элемент
nav.
Влияние на поиск
Чёткие таблицы и списки облегчают поисковой системе понимание содержимого, а иногда позволяют показать фрагмент прямо в выдаче в виде списка или таблицы. Гарантировать это нельзя, но аккуратная разметка увеличивает шансы. Для списков товаров и подборок есть отдельная разметка: ItemList.
Таблицы на телефоне
- Оберните широкую таблицу контейнером с горизонтальной прокруткой, чтобы она не растягивала страницу.
- Ограничьте число столбцов: больше пяти на телефоне читаются плохо.
- Проверьте таблицу на реальном устройстве: мобильные условия отличаются от настольных.
Не превращайте текст в сплошные таблицы и списки. Материал должен читаться как связный рассказ, а форматы — помогать, а не заменять его. Общая структура — в статье про иерархию заголовков.
Адаптивная обёртка для таблицы
Чтобы широкая таблица не вылезала за пределы экрана телефона, её помещают в контейнер с прокруткой:
<div style='overflow-x: auto'>
<table> ... </table>
</div>Контейнер добавляет горизонтальную прокрутку только для таблицы, а остальная страница остаётся на месте. Так поступают и в статьях этого блога.
Частые вопросы
Когда использовать таблицу вместо списка?
Когда нужно сравнить несколько объектов по нескольким параметрам; список подходит для последовательности шагов и перечня пунктов.
Зачем нужны теги th и caption?
Они отделяют заголовки от данных и объясняют тему таблицы, что помогает и программам экранного доступа, и поисковой системе.
Можно ли верстать страницу таблицами?
Нет: таблицы предназначены для данных; для расположения блоков используют стили.
Готовый адрес можно собрать прямо сейчас: откройте генератор ЧПУ — он транслитерирует фразу по таблице Яндекса, уберёт служебные слова и покажет длину адреса.