Структура таблицы

Каждая таблица состоит из строк и ячеек, минимально может быть одна строка и одна ячейка. В таком случае, впрочем, непонятно, зачем использовать таблицу, потому что как такового табличного представления уже нет. Кроме того, таблице можно задать заголовок, который кратко описывает её содержимое, указать «шапку», «тело» и «подвал» таблицы. Они нужны для стилевого или смыслового выделения части данных. В примере 1 показано создание таблицы, содержащей все упомянутые компоненты.

Пример 1. Создание таблицы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   table {
    width: 100%; /* Ширина таблицы */
    border-collapse: collapse; /* Убираем двойные границы */
   }
   td, th {
    border: 1px solid #333; /* */
    padding: 3px; /* Поля в ячейках */
   }
   thead, tfoot {
    background: #f0f0f0; /* Цвет фона */
   }
   tbody:hover {
    background: #f5e0cd; /* Цвет фона при наведении курсора */
    color: #ce232a; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <table>
   <caption>Материал для гаек по ГОСТ 1759.5–87</caption>
   <thead>
    <tr>
     <th>Класс прочности</th>
     <th>Технологические процессы</th>
     <th>Марка стали</th>
     <th>Обозначение стандарта</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>4</td>
     <td>Горячая штамповка</td>
     <td>20, Ст3кп3, Ст3сп3</td>
     <td>ГОСТ 1050–79</td>
    </tr>
   </tbody>
   <tbody>
    <tr>
     <td rowspan="2">5</td>
     <td>Холодная штамповка</td>
     <td>10, 10кп</td>
     <td>ГОСТ 0702–78</td>
    </tr>
    <tr>
     <td>Горячая штамповка</td>
     <td>20</td><td></td>
    </tr>
   </tbody>
   <tbody>
    <tr>
     <td>6</td>
     <td>Холодная штамповка</td>
     <td>10, 10кп, 15, 15кп</td>
     <td>ГОСТ 0702–78</td>
    </tr>
   </tbody>
   <tbody>
    <tr>
     <td rowspan="2">8, 9</td>
     <td>Горячая штамповка</td>
     <td>35</td>
     <td rowspan="2">ГОСТ 1050–74<br>ГОСТ 4543–71<br>ГОСТ 10702–78</td>
    </tr>
    <tr>
     <td>Холодная штамповка</td>
     <td>20, 20кп</td>
    </tr>
   </tbody>
   <tfoot>
    <tr>
     <th>Класс прочности</th>
     <th>Технологические процессы</th>
     <th>Марка стали</th>
     <th>Обозначение стандарта</th>
    </tr>
   </tfoot>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 1.

Таблица с заголовком, «шапкой» и «подвалом»

Рис. 1. Таблица с заголовком, «шапкой» и «подвалом»

При использовании элементов <thead>, <tbody> и <tfoot> придерживайтесь следующих правил.

Заголовок таблицы <caption> пишется в самом верху таблицы, сразу после открывающего тега <table>.
<thead> вставляется вверху таблицы, сразу после заголовка, если он присутствует.
<tfoot> вставляется после <tbody>, при этом отображается всегда в самом низу таблицы.
Элемент <tbody> для таблиц нужен обязательно, но для простых таблиц без <thead> и <tfoot> его можно не указывать. Браузеры сами научились вставлять его автоматически в код, понимая, что большинство разработчиков ленятся добавлять элемент, который визуально никак не влияет на таблицу.
<tbody> может быть один или несколько, вы сами решаете, по какому принципу их добавлять. Например, в примере выше в некоторых строках имеются объединения ячеек и чтобы строки при наведении на них курсора мыши выделялись как нам требуется, мы их объединяем в <tbody> согласно нашей логике.

Колонки

Кроме объединения группы строк через <thead> есть ещё один способ группирования ячеек — по колонкам с помощью элементов <col> и <colgroup>. Каждая колонка таблицы сопоставляется со своим элементом <col> который пишется после открывающего тега <table>. Часть колонок можно объединять с помощью атрибута span, его значением выступает число объединяемых колонок. Элементы <col> допустимо помещать в один или несколько <colgroup>, объединяя колонки согласно нашим понятиям.

Элементы <col> и <colgroup> никак не влияют на вид таблицы и её отображение в браузере и применяются только со стилями, как показано в примере 2. Между колонками здесь добавляются двойные линии.

Пример 2. Колонки таблицы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   table {
    width: 100%;
    border-collapse: collapse;
   }
   td, th {
    border: 1px solid #333;
    padding: 3px;
   }
   col { border-left: 4px double #333; }
   col:first-child { border-left-width: 1px; }
  </style>
 </head>
 <body>
  <table>
   <colgroup>
    <col>
    <col span="3">
    <col>
   </colgroup>
   <tr>
    <th rowspan="2">Класс прочности гайки</th>
    <th colspan="4">Сопрягаемые болты</th>
   </tr>
   <tr>
    <th colspan="3">Класс прочности</th>
    <th>Диаметр резьбы</th>
   </tr>
   <tr>
    <td>4</td><td>3,6</td>
    <td>4,6</td><td>4,8</td>
    <td>&gt; М16</td>
   </tr>
   <tr>
    <td>5</td><td>5,6</td>
    <td>5,8</td><td></td>
    <td>≤ М16</td>
   </tr>
   <tr>
    <td>6</td><td>6,8</td>
    <td></td><td></td>
    <td>≤ М48</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 2. Заметим, что похожего результата можно добиться заменив в стилях селектор col на td и th.

Двойные линии между колонок