Таблицы

Таблица подходит для данных, у которых есть строки и столбцы: расписание, прайс-лист, сравнение тарифов. В HTML таблицу собирают построчно: сначала строка, внутри неё — ячейки слева направо.

Простая таблица

<table> — вся таблица, <tr> (table row) — строка, <td> (table data) — обычная ячейка, <th> (table header) — ячейка-заголовок:

<table>
  <tr>
    <th>Напиток</th>
    <th>Цена</th>
  </tr>
  <tr>
    <td>Чай</td>
    <td>$3</td>
  </tr>
  <tr>
    <td>Кофе</td>
    <td>$4</td>
  </tr>
</table>

Заголовки браузер выделил жирным и выровнял по центру. Рамок по умолчанию нет.

Рамки

Рамки добавляют в CSS. Свойство border-collapse: collapse склеивает соседние рамки в одну линию:

<style>
  table { border-collapse: collapse; }
  th, td { border: 1px solid #999; padding: 6px 12px; }
</style>
 
<table>
  <tr><th>Напиток</th><th>Цена</th></tr>
  <tr><td>Чай</td><td>$3</td></tr>
  <tr><td>Кофе</td><td>$4</td></tr>
</table>

Без border-collapse у каждой ячейки была бы своя рамка, и линии шли бы двойными.

Части таблицы

Строки большой таблицы делят на группы: <thead> — шапка, <tbody> — данные, <tfoot> — итоги. <caption> — название таблицы, его пишут первым внутри <table>:

<style>
  table { border-collapse: collapse; }
  th, td { border: 1px solid #999; padding: 6px 12px; }
</style>
 
<table>
  <caption>Заказ №42</caption>
  <thead>
    <tr><th>Товар</th><th>Сумма</th></tr>
  </thead>
  <tbody>
    <tr><td>Капучино</td><td>$4</td></tr>
    <tr><td>Круассан</td><td>$3</td></tr>
  </tbody>
  <tfoot>
    <tr><th>Итого</th><td>$7</td></tr>
  </tfoot>
</table>

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

Объединение столбцов

Атрибут colspan растягивает ячейку на несколько столбцов:

<style>
  table { border-collapse: collapse; }
  th, td { border: 1px solid #999; padding: 6px 12px; }
</style>
 
<table>
  <tr><th colspan="2">Контакты</th></tr>
  <tr><td>Телефон</td><td>+1 202 555-01-23</td></tr>
  <tr><td>Почта</td><td>hello@example.com</td></tr>
</table>

Объединение строк

rowspan растягивает ячейку вниз, на несколько строк. В следующих строках эту ячейку уже не пишут — её место занято:

<style>
  table { border-collapse: collapse; }
  th, td { border: 1px solid #999; padding: 6px 12px; }
</style>
 
<table>
  <tr><th rowspan="2">Понедельник</th><td>10:00 — йога</td></tr>
  <tr><td>18:00 — бассейн</td></tr>
  <tr><th>Вторник</th><td>12:00 — теннис</td></tr>
</table>

Частая ошибка

Таблицы нужны для данных, а не для того, чтобы расставить блоки страницы по колонкам. Раньше сайты так верстали, но такую разметку трудно менять, а на телефоне она не помещается на экран. Раскладку делают в CSS — флексбоксом и гридом из главы «Раскладка страницы». Ещё одна ошибка — разное число ячеек в строках: таблица «поедет». Считайте ячейки с учётом colspan.