Заголовки Таблицы HTML
Таблицы могут иметь заголовки для каждого столбца или ряда, или для нескольких столбцов или рядов сразу. Ячейки заголовков создаются с помощью элементов <th>; каждый <th> — это одна ячейка таблицы.
Пример
Таблица со строкой заголовка.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Строка заголовка</title>
</head>
<body>
<table>
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Возраст</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</body>
</html>
Вертикальные Заголовки Таблицы
Чтобы использовать первый столбец в качестве заголовков, сделайте первую ячейку каждого ряда элементом <th>.
Пример
Таблица с заголовками вдоль левой стороны.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Вертикальные заголовки</title>
</head>
<body>
<table>
<tr>
<th>Имя</th>
<td>Jill</td>
<td>Eve</td>
</tr>
<tr>
<th>Фамилия</th>
<td>Smith</td>
<td>Jackson</td>
</tr>
<tr>
<th>Возраст</th>
<td>94</td>
<td>50</td>
</tr>
</table>
</body>
</html>
Выравнивание Заголовков Таблицы
По умолчанию текст заголовка жирный и по центру. Чтобы выровнять его по левому краю, используйте свойство CSS text-align на th.
Пример
Заголовки, выровненные по левому краю с помощью CSS.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th {
text-align: left;
}
</style>
</head>
<body>
<table>
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Возраст</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</body>
</html>
Заголовок для Нескольких Столбцов
Заголовок может занимать два или более столбцов. Используйте атрибут colspan на элементе <th>. Больше о colspan и rowspan вы узнаете в главе Colspan и rowspan таблицы.
Пример
Заголовок, занимающий два столбца.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Заголовок с Colspan</title>
</head>
<body>
<table>
<tr>
<th colspan="2">Имя</th>
<th>Возраст</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</body>
</html>
Заголовок Таблицы (Caption)
Вы можете добавить подпись, которая служит заголовком для всей таблицы, с помощью тега <caption>.
Примечание: Тег <caption> должен идти сразу после тега <table>.
Пример
Таблица с подписью.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Заголовок таблицы</title>
</head>
<body>
<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>
</body>
</html>