Таблицы

Зачем это нужно

Расписание поездов, таблица результатов, сравнение тарифов, прайс-лист — данные, у которых есть строки и столбцы. Для них в HTML есть таблицы. Важно: таблицы — для данных, а не для раскладки страницы на колонки (так делали в 2000-х; сейчас для этого есть Flexbox и Grid — темы 13–14).

Строки и ячейки

Таблица строится по строкам:

• <table> — вся таблица;
• <tr> (table row) — строка;
• <td> (table data) — ячейка внутри строки.

<table>
  <tr>
    <td>Яблоки</td>
    <td>120 ₽</td>
  </tr>
  <tr>
    <td>Груши</td>
    <td>150 ₽</td>
  </tr>
</table>

Результат: 2 строки по 2 ячейки. Рамок нет — браузер по умолчанию их не рисует.

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

Заголовочные ячейки <th>

<th> (table header) — ячейка-заголовок. Текст в ней жирный и по центру, а программы чтения с экрана понимают, что это название колонки:

<table>
  <tr>
    <th>Товар</th>
    <th>Цена</th>
  </tr>
  <tr>
    <td>Яблоки</td>
    <td>120 ₽</td>
  </tr>
</table>

Результат: первая строка жирная — шапка таблицы.

Части таблицы и подпись

Большие таблицы делят на части:

• <caption> — название таблицы, идёт сразу после <table>;
• <thead> — шапка;
• <tbody> — основные данные;
• <tfoot> — итоговая строка.

<table>
  <caption>Покупки</caption>
  <thead>
    <tr><th>Товар</th><th>Цена</th></tr>
  </thead>
  <tbody>
    <tr><td>Хлеб</td><td>40</td></tr>
    <tr><td>Сыр</td><td>300</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Итого</td><td>340</td></tr>
  </tfoot>
</table>

Результат: над таблицей надпись «Покупки», жирная шапка, две строки данных и строка «Итого».

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

Ячейку можно растянуть на несколько колонок — colspan — или строк — rowspan:

<table border="1">
  <tr><th colspan="2">Контакты</th></tr>
  <tr><td>Телефон</td><td>123-45-67</td></tr>
  <tr><td rowspan="2">Почта</td><td>work@mail.ru</td></tr>
  <tr><td>home@mail.ru</td></tr>
</table>

Результат: «Контакты» — одна широкая ячейка на обе колонки; «Почта» — высокая ячейка на две строки, справа от неё два адреса.

Обрати внимание: в последней строке одна ячейка — второе место уже занято растянутой «Почтой». Считай так: каждая строка в сумме занимает одинаковое число колонок, с учётом colspan и rowspan сверху.

border="1" — старый способ быстро показать рамки. В настоящих проектах рамки задают в CSS: td, th { border: 1px solid gray; }.

Как это работает внутри

Браузер сначала читает все строки, а потом считает ширину колонок: колонка получается такой ширины, чтобы влез самый длинный текст в ней. Если в <table> не написать <tbody>, браузер добавит его сам — в DOM он появится, даже если в коде его нет.

Частые ошибки

1. Текст прямо в <tr>. <tr>Яблоки</tr> — текст должен лежать в <td> или <th>.
2. Разное число ячеек в строках. Таблица «поедет»: колонки съедут, справа появятся пустые места.
3. colspan без удаления лишних ячеек. Растянул ячейку на 2 колонки — в строке должно стать на одну ячейку меньше.
4. <caption> не первым. Подпись должна идти сразу после открывающего <table>.
5. Таблица для вёрстки. Колонки сайта через <table> плохо работают на телефоне. Таблицы — только для данных.

Шпаргалка

Тег / атрибут	Что делает
<table>	таблица
<tr>	строка
<td> / <th>	ячейка / ячейка-заголовок
<caption>	название таблицы (первым внутри <table>)
<thead>, <tbody>, <tfoot>	шапка, тело, итог
colspan="2"	растянуть на 2 колонки
rowspan="2"	растянуть на 2 строки