Таблицы в HTML: table, tr, td, объединение ячеек и оформление

Нужно показать расписание, сравнение тарифов или результаты по дням. Строки и колонки просятся в таблицу, и в HTML для неё есть свой набор тегов: из них браузер сам выравнивает колонки, а программа чтения с экрана понимает, к какому заголовку относится каждая ячейка.

Таблица в HTML — это <table>, внутри которого строки <tr>, а в строках ячейки: <th> для заголовков и <td> для данных. Подпись даёт <caption>, шапку и тело разделяют <thead> и <tbody>, а ячейку на несколько строк или колонок растягивают атрибуты rowspan и colspan. Внешний вид — рамки, фон, прокрутка — задают в CSS.

Пример: расписание мастер-классов

Открой пример в песочнице HTML/CSS ссылкой под вторым блоком: разметка попадёт во вкладку index.html, стили — в styles.css. В таблице есть всё, что разберём дальше: подпись, шапка, заголовки строк, ячейка на две строки и ячейка на три колонки.

HTML:

<div class="table-wrap">
  <table>
    <caption>Мастер-классы в «Зерне»</caption>
    <thead>
      <tr>
        <th scope="col">День</th>
        <th scope="col">Время</th>
        <th scope="col">Тема</th>
        <th scope="col">Мест</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row" rowspan="2">Суббота</th>
        <td>12:00</td>
        <td>Кофе в турке</td>
        <td>12</td>
      </tr>
      <tr>
        <td>16:00</td>
        <td>Латте-арт</td>
        <td>8</td>
      </tr>
      <tr>
        <th scope="row">Воскресенье</th>
        <td>12:00</td>
        <td>Воронка и аэропресс</td>
        <td>10</td>
      </tr>
      <tr>
        <th scope="row">Понедельник</th>
        <td colspan="3">Выходной: кофейня закрыта</td>
      </tr>
    </tbody>
  </table>
</div>

CSS:

body {
  margin: 0;
  padding: 1rem;
  font-family: system-ui, sans-serif;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  min-width: 28rem;
  border-collapse: collapse;
}

caption {
  margin-bottom: 0.5rem;
  font-weight: 700;
  text-align: left;
}

th,
td {
  padding: 0.5rem 0.75rem;
  border: 1px solid #d6dbe4;
  text-align: left;
}

thead th {
  background: #1f2a44;
  color: #ffffff;
}

tbody th {
  background: #f4f6fa;
}

Каркас таблицы: table, tr, th и td

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

<table>
  <tr>
    <th>Напиток</th>
    <th>Объём</th>
  </tr>
  <tr>
    <td>Капучино</td>
    <td>250 мл</td>
  </tr>
</table>

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

Подпись и заголовки: caption, thead и scope

caption. Подпись таблицы, первым элементом внутри <table>. Её читают первой, и по ней понятно, о чём таблица, ещё до чтения ячеек.

thead и tbody. Шапка и тело. На вид без CSS ничего не меняется, но так видно, где заголовки, а где данные. Шапку удобно оформить отдельно — в примере это thead th с тёмным фоном.

th и scope. <th> — ячейка-заголовок, по умолчанию жирная и по центру. Атрибут scope="col" говорит, что заголовок относится к колонке, scope="row" — к строке. По ним программа чтения с экрана, переходя по ячейкам, называет заголовки: для числа 10 это «Мест» и «Воскресенье».

Объединение ячеек: colspan и rowspan

colspan="3" растягивает ячейку вправо на три колонки: в примере так сделана строка выходного дня. rowspan="2" растягивает ячейку вниз на две строки: «Суббота» относится и к утреннему, и к вечернему мастер-классу.

Главное правило объединения: занятое место считается. Во второй строке субботы всего три ячейки, потому что первую колонку в ней уже занимает «Суббота» сверху. Лишняя ячейка в такой строке выпирает за край таблицы, а лишний rowspan сдвигает все ячейки ниже на одну колонку вправо.

Оформление: рамки, фон и прокрутка на телефоне

Рамки. Без CSS у таблицы нет никаких линий. border у th и td рисует рамку вокруг каждой ячейки, а border-collapse: collapse у таблицы склеивает соседние рамки в одну линию. Без него между ячейками останется зазор и рамки будут двойными.

Отступы и выравнивание. padding у ячеек отодвигает текст от линий. text-align выравнивает по горизонтали, vertical-align: top — по верхнему краю, если строки разной высоты.

Полоски. Через строку красят селектором tbody tr:nth-child(even) — подробнее про такие селекторы в статье про селекторы CSS. С rowspan полоски путаются: объединённая ячейка принадлежит первой строке группы, поэтому в таблицах с объединением фон лучше давать заголовкам строк, как в примере.

Прокрутка на телефоне. Таблица не перестраивается под узкий экран: колонки остаются рядом, и на телефоне она выходит шире страницы. Обёртка с overflow-x: auto прокручивается сама, а страница остаётся на месте. min-width у таблицы не даёт колонкам сжаться до нечитаемых.

Когда таблица не нужна. Таблица — для данных, у которых есть строки и колонки. Чтобы разложить карточки или блоки страницы, бери CSS Grid: у раскладки на таблице плохо с адаптивностью и смыслом для программ чтения с экрана.

Шпаргалка: теги и атрибуты таблицы

Три правки, чтобы закрепить

Открой пример в песочнице и перед каждой правкой предскажи результат:

1. Убери у table строку border-collapse: collapse. Между ячейками появится зазор в пару пикселей, а рамки станут двойными.
2. Сотри у «Субботы» атрибут rowspan="2". Вечерний мастер-класс съедет на колонку влево: «16:00» окажется под «День», а последняя колонка в этой строке опустеет.
3. Удали правило .table-wrap и переключи результат на 375. Таблица вылезет за край, и прокручиваться вбок будет уже вся страница, а не только таблица.

Таблица — часть разметки, как и другие теги из статьи про теги HTML. А задания с автопроверкой на вёрстку ждут в тренажёре HTML и CSS.