Главная » Руководство по HTML – HTML5 введение » Таблицы HTML » Заголовки таблиц HTML

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

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

Имя	Фамилия	Возраст

10:00
11:00
12:00
13:00
14:00
15:00

	ПН	ВТ	СР	ЧТ	ПТ
8:00
9:00
10:00
11:00
12:00

Май

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

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

<table>
  <tr>
    <th>Имя</th>
    <th>Фамилия</th>
    <th>Возраст</th>
  </tr>
  <tr>
    <td>Фаст</td>
    <td>Игл</td>
    <td>47/td>
  </tr>
  <tr>
    <td>Элис</td>
    <td>Берд</td>
    <td>22</td>
</tr>
</table>

Имя	Фамилия	Возраст
Фаст	Игл	47
Элис	Берд	22

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

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

<table>
  <tr>
    <th>Имя</th>
    <td>Фаст</td>
    <td>Элис</td>
  </tr>
  <tr>
    <th>Фамилия</th>
    <td>Игл</td>
    <td>Берд</td>
  </tr>
  <tr>
    <th>Возраст</th>
    <td>47</td>
    <td>22</td>
</tr>
</table>

Имя	Фаст	Элис
Фамилия	Игл	Берд
Возраст	47	22

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

По умолчанию заголовки таблиц выделены жирным шрифтом и расположены по центру (как в примерах выше).

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

Выравнивание слева:

th {
  text-align: left;
}

Выравнивание справа:

th {
  text-align: right;
}

Заголовок для нескольких столбцов

Вы также можете создать заголовок, который охватывает два или более столбца.

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

Имя и Фамилия		Возраст
Фаст	Игл	47
Элис	Берд	37

<table>
  <tr>
    <th colspan="2">Имя и Фамилия</th>
    <th>Возраст</th>
  </tr>
  <tr>
    <td>Фаст</td>
    <td>Игл/td>
    <td>47</td>
  </tr>
  <tr>
    <td>Элис</td>
    <td>Берд</td>
    <td>22</td>
  </tr>
  </table>

🔗 Вы узнаете больше о colspan и rowspan в главе - таблицы colspan и rowspan.

Общий заголовок таблицы (Caption)

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

Ежемесячная экономия
Месяц	Экономия
Январь	10000 ₽
Февраль	5000 ₽

Чтобы добавить общий заголовок к таблице, используйте тег <caption>:

<table style="width:100%">
 <caption>Ежемесячная экономия</caption>
  <tr>
    <th>Месяц</th>
    <th>Экономия</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>10000 ₽</td>
  </tr>
  <tr>
    <td>Февраль</td>
    <td>5000 ₽</td>
  </tr>
</table>

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

☛ Отступы и интервалы HTML

Размеры таблиц HTML ☚

Поделиться ссылкой