foundation

Списки и таблицы

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

Списки выражают группы элементов; таблицы — двумерные связи данных. `ol` — когда порядок меняет смысл, `ul` — неупорядоченные группы, `dl` — пары «термин–значение», `table` — настоящие табличные данные с `caption`, `th`, `scope` и заголовками.

					<table>
  <caption>Продажи Q1 по регионам</caption>
  <thead>
    <tr><th scope="col">Регион</th><th scope="col">Выручка</th></tr>
  </thead>
  <tbody>...</tbody>
</table>

На интервью: семантика из смысла данных, а не из желаемого layout.

Типовые ошибки: таблицы для вёрстки вредят адаптивности и a11y; div-сетки для табличных данных заставляют вручную восстанавливать связи.

Компромисс: быстрые layout-хаки против устойчивой семантики — div-сетки быстрее в разработке, но дороже в a11y и поддержке.

Чеклист:

Теги списков для групп элементов.
Таблицы только для сеток данных.
Caption, если помогает ориентации.
Связывайте заголовки с ячейками через `scope` или `headers`.