HTML Заголовки таблиц
HTML-таблицы могут иметь заголовки для каждого столбца или строки, или для нескольких столбцов/строк.
| EMIL | TOBIAS | LINUS |
|---|---|---|
| 8:00 | ||
|---|---|---|
| 9:00 | ||
| 10:00 | ||
| 11:00 | ||
| 12:00 | ||
| 13:00 |
| MON | TUE | WED | THU | FRI | |
|---|---|---|---|---|---|
| 8:00 | |||||
| 9:00 | |||||
| 10:00 | |||||
| 11:00 | |||||
| 12:00 |
| DECEMBER | ||
|---|---|---|
HTML Заголовки таблиц
Заголовки таблиц определяются элементами th, каждый элемент th представляет ячейку таблицы.
Пример
<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>
Попробуйте сами »
Заголовки таблицы по вертикали
Чтобы использовать первый столбец в качестве заголовков таблицы, определите первую ячейку в каждой строке как элемент th:
Пример
<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>
Попробуйте сами »
Выравнивание заголовков таблицы
По умолчанию заголовки таблиц выделяются жирным шрифтом и располагаются по центру:
| Имя | Фамилия | Возраст |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
Чтобы выровнять заголовки таблицы по левому краю, используйте CSS свойство text-align:
Заголовок для нескольких столбцов
У вас может быть заголовок, который охватывает два или больше столбцов.
| Имя | Возраст | |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
Для этого используйте атрибут colspan в элементе <th>:
Пример
<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>
Попробуйте сами »
Вы узнаете больше о colspan и rowspan в разделе Table colspan & rowspan на нашем сайте W3Schools на русском.
Заголовок (подпись) таблицы
Вы можете добавить подпись, которая будет служить заголовком для всей таблицы.
| Місяць | Економія |
|---|---|
| Січень | $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>.
