Заголовки таблицы HTML
Таблицы HTML могут иметь заголовки для каждого столбца или строки или для многих столбцов/строк.
| ЭМИЛЬ | ТОБИАС | ЛИНУС |
|---|---|---|
| 8:00 | ||
|---|---|---|
| 9:00 | ||
| 10:00 | ||
| 11:00 | ||
| 12:00 | ||
| 13:00 |
| ПН | ВТ | МЫ Б | СОБИРАТЬ | ПТ | |
|---|---|---|---|---|---|
| 8:00 | |||||
| 9:00 | |||||
| 10:00 | |||||
| 11:00 | |||||
| 12:00 |
| ДЕКАБРЬ | ||
|---|---|---|
Заголовки таблицы HTML
Заголовки таблиц определяются thэлементами, каждый thэлемент представляет собой ячейку таблицы.
Пример
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</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>Firstname</th>
<td>Jill</td>
<td>Eve</td>
</tr>
<tr>
<th>Lastname</th>
<td>Smith</td>
<td>Jackson</td>
</tr>
<tr>
<th>Age</th>
<td>94</td>
<td>50</td>
</tr>
</table>
Выровнять заголовки таблицы
По умолчанию заголовки таблиц выделены жирным шрифтом и расположены по центру:
| Имя | Фамилия | Возраст |
|---|---|---|
| Джилл | Смит | 50 |
| канун | Джексон | 94 |
Чтобы выровнять заголовки таблиц по левому краю, используйте text-alignсвойство CSS:
Пример
th {
text-align: left;
}
Заголовок для нескольких столбцов
У вас может быть заголовок, который охватывает два или более столбца.
| Имя | Возраст | |
|---|---|---|
| Джилл | Смит | 50 |
| канун | Джексон | 94 |
Для этого используйте colspanатрибут
<th>элемента:
Пример
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</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 в главе Таблица colspan и rowspan .
Заголовок таблицы
Вы можете добавить заголовок, который будет служить заголовком для всей таблицы.
| Месяц | Экономия |
|---|---|
| январь | 100 долларов |
| февраль | 50 долларов |
Чтобы добавить подпись к таблице, используйте <caption>тег:
Пример
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Примечание . Тег <caption>должен быть вставлен сразу после <table>тега.