1. Таблицы

Таблицы позволяют отобразить сложные связи, размещая в ячейках любой контент. Использовать таблицы нужно только для разметки табличных данных: расписание транспорта, финансовые данные, календарь, результаты матчей, меню в ресторане, прайслист и т. п. То, что логично представить в табличном виде, например используя Google Sheets.

Будем набирать разметку вот такого расписания поездов.

Для начала познакомимся с базовыми тегами.

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

Разметрим расписание поездов таблицей с тремя строками.

<table>
  <tr>
    <td>433</td>
    <td>Киев - Ковель</td>
    <td>5 часов</td>
  </tr>
  <tr>
    <td>701</td>
    <td>Харьков - Днепр</td>
    <td>7 часов</td>
  </tr>
  <tr>
    <td>258</td>
    <td>Львов - Одесса</td>
    <td>4 часа</td>
  </tr>
</table>

1.1. Ячейки-заголовки

Для того чтобы создать строку с заголовками столбцов, используем стандартный тег <tr> для строки, а ячейки размечаем специальным тегом <th> (table header) - семантическим тего ячейки-заголовка. По умолчанию текст внутри <th> выделяется жирным и центрируется.

<table>
  <tr>
    <th>Номер</th>
    <th>Маршрут</th>
    <th>Время в пути</th>
  </tr>

  <tr>
    <td>433</td>
    <td>Киев - Ковель</td>
    <td>5 часов</td>
  </tr>
  <tr>
    <td>701</td>
    <td>Харьков - Днепр</td>
    <td>7 часов</td>
  </tr>
  <tr>
    <td>258</td>
    <td>Львов - Одесса</td>
    <td>4 часа</td>
  </tr>
</table>

1.2. Секции таблицы

Для того чтобы повысить семантику разметки таблицы есть несколько структурных тегов.

• <thead> - оборачивает группу строк таблицы в области заголовка, шапка.
• <tbody> - оборачивает основную группу строк таблицы, тело.
• <tfoot> - обозначает группу строк таблицы в области нижнего колонтитула, подвал.

В расписании поездов можно выделить шапку из одной строки с названиями колонок и тело.

<table>
  <thead>
    <tr>
      <th>Номер</th>
      <th>Маршрут</th>
      <th>Время в пути</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>433</td>
      <td>Киев - Ковель</td>
      <td>5 часов</td>
    </tr>
    <tr>
      <td>701</td>
      <td>Харьков - Днепр</td>
      <td>7 часов</td>
    </tr>
    <tr>
      <td>258</td>
      <td>Львов - Одесса</td>
      <td>4 часа</td>
    </tr>
  </tbody>
</table>

1.3. Заголовок таблицы

Если у таблицы есть заголовок, конечно можно разметить его используя теги заголовков.

<h1>Расписание поездов</h1>
<table>
  <!-- Разметка таблицы -->
</table>

Но более семантично будет использовать специальный табличный тег <caption>, который должен располагаться внутри таблицы, самым первым элементом.

<table>
  <caption>
    Расписание поездов
  </caption>

  <!-- Остальная разметка таблицы -->
</table>

1.4. Группировка ячеек

Некоторые таблицы сделаны так, что нужно объеденить несколько ячеек по горизонтали или вертикали.

Напишем разметку такой таблицы, добавив дополнительные ячейки учитывая что «Облачный сервис» займёт две ячейки по высоте, а «Использование» - три по ширине.

<table>
  <thead>
    <tr>
      <th>Облачный сервис</th>
      <th>Использование</th>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <th></th>
      <th>Пользователи</th>
      <th>Посещений</th>
      <th>Объём</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Google</td>
      <td>12000</td>
      <td>307000</td>
      <td>1000 Tb</td>
    </tr>
    <tr>
      <td>Amazon</td>
      <td>9000</td>
      <td>200500</td>
      <td>800 Tb</td>
    </tr>
  </tbody>
</table>

В результате получим такую таблицу.

Правило равенства числа ячеек в строках и столбцах нельзя отменить, но можно обойти. Для того чтобы расширить ячейку по горизонтали, используется атрибут colspan, по вертикали rowspan.

Нужно определить группу ячеек для слияния и затем самой верхней и левой ячейке группы задать атрибут colspan с числом ячеек требующих объединения справа и rowspan снизу. После этого обязательно нужно удалить ставшие ненужными ячейки справа и снизу.

<table>
  <thead>
    <tr>
      <th rowspan="2">Облачный сервис</th>
      <th colspan="3">Использование</th>
    </tr>
    <tr>
      <th>Пользователи</th>
      <th>Посещений</th>
      <th>Объём</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Google</td>
      <td>12000</td>
      <td>307000</td>
      <td>1000 Tb</td>
    </tr>
    <tr>
      <td>Amazon</td>
      <td>9000</td>
      <td>200500</td>
      <td>800 Tb</td>
    </tr>
  </tbody>
</table>