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

Заголовки таблиц HTML могут использоваться для отдельных столбцов или строк либо охватывать несколько столбцов/строк одновременно.

---

---

Заголовки таблиц HTML

Заголовки таблицы определяются элементами <th>. Каждый элемент <th> представляет собой ячейку заголовка.

Пример

Простая таблица с заголовком:

<table>
  <tr>
    <th>Имя</th>
    <th>Фамилия</th>
    <th>Возраст</th>
  </tr>
  <tr>
    <td>Джил</td>
    <td>Смит</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Ив</td>
    <td>Джексон</td>
    <td>94</td>
  </tr>
</table>

---

Вертикальные заголовки таблицы

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

Пример

<table>
  <tr>
    <th>Имя</th>
    <td>Джил</td>
    <td>Ив</td>
  </tr>
  <tr>
    <th>Фамилия</th>
    <td>Смит</td>
    <td>Джексон</td>
  </tr>
  <tr>
    <th>Возраст</th>
    <td>94</td>
    <td>50</td>
  </tr>
</table>

---

Выравнивание заголовков таблицы

По умолчанию заголовки таблицы выделяются жирным шрифтом и центрируются горизонтально:

Имя	Фамилия	Возраст
Джил	Смит	50
Ив	Джексон	94

Чтобы выровнять заголовки по левому краю, используйте CSS-свойство text-align:

th {
  text-align: left;
}

---

Объединённые заголовки для нескольких колонок

Иногда требуется создать общий заголовок для нескольких колонок.

Имя		Возраст
Джил	Смит	50
Ив	Джексон	94

Для этого применяется атрибут colspan к элементу <th>:

<table>
  <tr>
    <th colspan="2">Имя</th>
    <th>Возраст</th>
  </tr>
  <tr>
    <td>Джил</td>
    <td>Смит</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Ив</td>
    <td>Джексон</td>
    <td>94</td>
  </tr>
</table>

Более подробно использование атрибутов colspan и rowspan будет рассмотрено далее.

---

Подпись к таблице

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

Ежемесячные сбережения

Месяц	Сбережения
Январь	$100
Февраль	$50

Для добавления подписи к таблице используется тег <caption>:

<table style="width:100%">
  <caption>Ежемесячные сбережения</caption>
  <tr>
    <th>Месяц</th>
    <th>Сбережения</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Февраль</td>
    <td>$50</td>
  </tr>
</table>

Примечание: Тег <caption> должен располагаться сразу после открытия тега <table>.