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

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

Таблица строится по строкам: <table> содержит строки <tr>, а строки — ячейки <td> (данные) и <th> (заголовки).

Четыре главных тега

Таблица описывается построчно, сверху вниз. Запомните четыре тега:

• <table> — контейнер всей таблицы;
• <tr> (table row) — строка;
• <th> (table header) — ячейка-заголовок (жирная, по центру);
• <td> (table data) — обычная ячейка с данными.

Первая таблица

Соберём таблицу с расписанием. Каждая строка — это <tr>, а внутри неё ячейки:

<table>
  <tr>
    <th>День</th>
    <th>Предмет</th>
  </tr>
  <tr>
    <td>Понедельник</td>
    <td>Математика</td>
  </tr>
  <tr>
    <td>Вторник</td>
    <td>История</td>
  </tr>
</table>

Что получится: первая строка — шапка с заголовками «День» и «Предмет», ниже — две строки данных. Браузер выстроит ровную сетку.

Как читать структуру

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

Поэтому важно, чтобы во всех строках было одинаковое число ячеек — иначе сетка «поедет».

th против td

Разница не только в виде. <th> семантически означает «заголовок» — программы чтения с экрана связывают данные с заголовком столбца, и незрячему пользователю понятно, что значит каждая ячейка. Поэтому шапку всегда делайте через <th>, а не через жирный <td>.

Границы таблицы

Если вы откроете таблицу из примера выше в браузере, то заметите: линий-границ между ячейками нет. Это нормально — по умолчанию таблица показывается без рамок. Может показаться, что вы что-то сделали не так, но сетка на месте, просто невидима.

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

Итог

• Таблица описывается по строкам: <table> → <tr> → ячейки.
• <th> — заголовочная ячейка, <td> — ячейка с данными.
• Во всех строках должно быть одинаковое число ячеек, иначе сетка сломается.