Урок 4. Таблицы в HTML

Таблица нужна там, где данные устроены строками и столбцами: расписание, прайс, результаты соревнований, сравнение тарифов. Для раскладки страницы на колонки таблицы не используют — для этого есть Flexbox и Grid (о них — в уроках Flexbox и Grid).

Из чего состоит таблица

<table>
  <tr>
    <th>День</th>
    <th>Время</th>
    <th>Занятие</th>
  </tr>
  <tr>
    <td>Понедельник</td>
    <td>15:00</td>
    <td>Рисунок</td>
  </tr>
  <tr>
    <td>Среда</td>
    <td>16:30</td>
    <td>Живопись</td>
  </tr>
</table>

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

Таблица строится по строкам: сначала строка, внутри неё ячейки слева направо. В каждой строке должно быть столько ячеек, сколько столбцов, иначе таблица «поедет».

Без CSS у таблицы нет рамок — только текст, выровненный по столбцам. Как добавить рамки — ниже.

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

<table>
  <caption>Расписание кружка на неделю</caption>
  <thead>
    <tr>
      <th scope="col">День</th>
      <th scope="col">Время</th>
      <th scope="col">Занятие</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Понедельник</td>
      <td>15:00</td>
      <td>Рисунок</td>
    </tr>
    <tr>
      <td>Среда</td>
      <td>16:30</td>
      <td>Живопись</td>
    </tr>
  </tbody>
</table>

• <caption> — название таблицы, стоит сразу после <table>.
• <thead> — шапка, <tbody> — тело, <tfoot> — итоговые строки внизу (например, «Итого»).
• scope="col" у <th> говорит, что это заголовок столбца; для заголовка строки — scope="row".

<thead> и <tbody> необязательны, но с ними таблицу проще оформлять: шапке можно задать свой фон одним правилом.

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

Ячейка может занимать несколько столбцов (colspan) или несколько строк (rowspan).

<table>
  <tr>
    <th>Время</th>
    <th>Понедельник</th>
    <th>Вторник</th>
  </tr>
  <tr>
    <td>9:00</td>
    <td colspan="2">Экскурсия (оба дня)</td>
  </tr>
  <tr>
    <td>12:00</td>
    <td rowspan="2">Мастер-класс</td>
    <td>Обед</td>
  </tr>
  <tr>
    <td>14:00</td>
    <td>Свободное время</td>
  </tr>
</table>

Как это работает:

• во второй строке ячейка «Экскурсия» с colspan="2" занимает два столбца, поэтому в строке всего две <td>;
• в третьей строке «Мастер-класс» с rowspan="2" занимает и следующую строку;
• поэтому в четвёртой строке тоже две ячейки: место во втором столбце уже занято.

Главная ошибка с объединением — лишняя ячейка в строке, которую уже частично заняла ячейка сверху. Если таблица разъехалась, посчитайте ячейки в каждой строке с учётом colspan и rowspan.

Рамки и оформление

Атрибут border="1" у <table> браузеры до сих пор понимают, но он устарел: рамки задают в CSS. Как подключить CSS, подробно — в уроке Основы CSS, а пока вставьте этот блок в <head> страницы:

<style>
  table {
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #999;
    padding: 6px 12px;
  }
  thead th {
    background-color: #eee;
  }
</style>

• border-collapse: collapse склеивает соседние рамки в одну линию. Без него у каждой ячейки своя рамка и между ними видны промежутки.
• padding — отступ текста от рамки внутри ячейки.

Больше способов оформить таблицу (полосы через строку, рамка только снаружи) — в справке Как сделать таблицу с рамками.

Широкая таблица на телефоне

Таблица из многих столбцов не помещается на узком экране и растягивает всю страницу вбок. Оберните её в блок с прокруткой — прокручиваться будет только таблица:

<div style="overflow-x: auto;">
  <table>
    <tr>
      <th>Тариф</th>
      <th>Цена</th>
      <th>Скорость</th>
      <th>Трафик</th>
      <th>Срок</th>
    </tr>
    <tr>
      <td>Базовый</td>
      <td>10 р.</td>
      <td>50 Мбит/с</td>
      <td>без ограничений</td>
      <td>месяц</td>
    </tr>
  </table>
</div>

overflow-x: auto показывает полосу прокрутки по горизонтали, только когда содержимое не помещается.

Коротко

• Таблица — <table>, строка — <tr>, ячейка — <td>, заголовок — <th>.
• Название — <caption>, части — <thead>, <tbody>, <tfoot>.
• colspan объединяет ячейки по горизонтали, rowspan — по вертикали; занятые места в других строках не повторяют.
• Рамки — в CSS: border у ячеек и border-collapse: collapse у таблицы.
• Таблицы — для данных, а не для раскладки страницы; широкую таблицу оборачивают в блок с overflow-x: auto.

Проверьте себя