Таблицы HTML

table, thead/tbody/tfoot, tr/th/td, объединение ячеек colspan/rowspan, скопы заголовков и семантика таблиц.

Уровень: начальный 9 разделов 1,5 часа

1. Структура таблицы

Семантическая таблица делится на шапку (thead), тело (tbody) и подвал (tfoot). Это даёт скринридерам и стилям точки зацепки, а SEO — понимание данных.

<table>
  <thead>
    <tr><th>Модель</th><th>Цена</th></tr>
  </thead>
  <tbody>
    <tr><td>Наушники X</td><td>999 ₽</td></tr>
    <tr><td>Наушники Y</td><td>1299 ₽</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="2">Цены за февраль</td></tr>
  </tfoot>
</table>

2. th и scope

<table>
  <thead>
    <tr>
      <th scope="col">Товар</th>
      <th scope="col">Количество</th>
      <th scope="col">Сумма</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Клавиатура</th>
      <td>2</td><td>4000 ₽</td>
    </tr>
  </tbody>
</table>

th — заголовок. scope="col"/"row" говорит, к чему относится заголовок — критично для таблицы данных: скринридер озвучивает «Сумма: 4000 ₽».

3. Объединение ячеек

<tr>
  <td rowspan="2">Объединяем по вертикали</td>
  <td>Ячейка</td>
</tr>
<tr><td>Ячейка ниже</td></tr>

<tr>
  <td colspan="2">Объединяем по горизонтали</td>
</tr>

colspan — в ширину (слить столбцы), rowspan — по высоте;
при объединении лишние ячейки в строке не пишут;
не стройте лейауты из таблиц — для этого грид.

4. caption — название таблицы

<table>
  <caption>Сравнение тарифов</caption>
  <thead>…</thead>
</table>

caption — заголовок для скринридера и Browsing understanding. Первый дочерний элемент table.

5. Стилизация таблиц

table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 12px; border-bottom: 1px solid #e2e8f0; text-align: left; }
thead th { background: #f1f5f9; }
tbody tr:nth-child(odd) { background: #f8fafc; }

border-collapse: collapse сводит двойные границы. Зебра (стеклянные строки) через :nth-child — читается сплошь перекоса. text-align: left для колонок чисел лучше отключить.

6. Горизонтальный скролл на телефоне

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 600px) { .table-scroll table { min-width: 480px; } }

Таблица «не сжимается» — для узких дают контейнер со скроллом (overflow-x: auto). Чтобы контент не сжимался ниже разумного, мінімімум ширина.

7. Не таблицы на сейф: используйте правильно

таблицы для ДАННЫХ (корзина, цены, тарифы);
раскладка (макеты) — flex/grid, не table;
для форм-параметров (термин-значение) — dl;
таблица данных без scope заголовки = бардак.

<dl>
  <dt>Гарантия</dt><dd>24 месяца</dd>
  <dt>Вес</dt><dd>250 г</dd>
</dl>

8. Проверка доступности таблиц

th + scope у каждого заголовка;
caption — описание таблицы;
объединения colspan/rowspan корректно посчитаны;
контраст заголовков и строк — норма;
проверка с NVDA/JAWS на слух таблицы.

9. Чек-лист таблиц

thead/tbody/tfoot на месте;
th со scope для заголовков;
объединения сделаны колонки/строки окей;
caption заполнен;
мобильный — скролл в контейнере;
лишь данные, не лейаут.

Что дальше

Курс завершён.

← Вернуться к курсам