Введение
В HTML вы можете группировать содержимое нижнего колонтитула таблицы с использованием тега <tfoot>. Нижний колонтитул таблицы может включать сводную информацию, пояснительные примечания или комментарии. Тег <tfoot> является одним из дочерних элементов тега <table> и используется совместно с тегами <thead> и <tbody>. В этом практическом занятии вы научитесь создавать нижние колонтитулы таблиц в HTML с использованием тега <tfoot>.
Примечание: Вы можете практиковать программирование в
index.htmlи изучить Как писать HTML в Visual Studio Code. Нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.
Создайте базовую структуру таблицы
Начните с создания базовой структуры таблицы, которая содержит секции заголовка таблицы, тела таблицы и нижнего колонтитула.
<!doctype html>
<html>
<head>
<title>Table Footer using tfoot Tag</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>35</td>
<td>Male</td>
</tr>
<tr>
<td>Jane</td>
<td>28</td>
<td>Female</td>
</tr>
<tr>
<td>David</td>
<td>42</td>
<td>Male</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Table Footer</td>
</tr>
</tfoot>
</table>
</body>
</html>
В коде выше мы создали базовую структуру таблицы с тремя столбцами: Name, Age и Gender. Мы также добавили три строки данных в таблицу. Тег <tfoot> содержит только одну строку с одной ячейкой (<td>), которая охватывает три столбца (colspan="3").
Добавьте содержимое в нижний колонтитул таблицы
После создания базовой структуры таблицы вы можете добавить содержимое в тег <tfoot>.
<!doctype html>
<html>
<head>
<title>Table Footer using tfoot Tag</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>35</td>
<td>Male</td>
</tr>
<tr>
<td>Jane</td>
<td>28</td>
<td>Female</td>
</tr>
<tr>
<td>David</td>
<td>42</td>
<td>Male</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Average Age:</td>
<td>35</td>
</tr>
</tfoot>
</table>
</body>
</html>
В этом примере мы добавили строку в тег <tfoot>, которая содержит средний возраст людей в таблице. Первая ячейка в строке охватывает два столбца (colspan="2") и отображает текст "Average Age:". Вторая ячейка отображает фактическое значение среднего возраста.
Примените CSS к нижнему колонтитулу таблицы
Вы можете применить стили CSS к тегу <tfoot> и его дочерним элементам, чтобы настроить внешний вид нижнего колонтитула таблицы.
<!doctype html>
<html>
<head>
<title>Table Footer using tfoot Tag</title>
<style>
tfoot {
background-color: #ccc;
font-weight: bold;
text-align: center;
}
tfoot td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>35</td>
<td>Male</td>
</tr>
<tr>
<td>Jane</td>
<td>28</td>
<td>Female</td>
</tr>
<tr>
<td>David</td>
<td>42</td>
<td>Male</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Average Age:</td>
<td>35</td>
</tr>
</tfoot>
</table>
</body>
</html>
В этом примере мы применили стиль фонового цвета, жирности шрифта и выравнивания текста к тегу <tfoot> с использованием селектора CSS tfoot. Мы также применили отступы к ячейкам внутри секции нижнего колонтитула таблицы с использованием селектора tfoot td.
Резюме
Тег <tfoot> используется для группировки содержимого нижнего колонтитула таблицы. Он работает совместно с тегами <thead> и <tbody> для создания полной структуры таблицы. Вы можете добавить содержимое и стили к тегу <tfoot> и его дочерним элементам с использованием HTML и CSS.
