Создайте эффективные нижние колонтитулы таблиц в HTML

Введение

В HTML вы можете группировать содержимое нижнего колонтитула таблицы с использованием тега <tfoot>. Нижний колонтитул таблицы может включать сводную информацию, пояснительные примечания или комментарии. Тег <tfoot> является одним из дочерних элементов тега <table> и используется совместно с тегами <thead> и <tbody>. В этом практическом занятии вы научитесь создавать нижние колонтитулы таблиц в HTML с использованием тега <tfoot>.

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/TablesGroup(["Tables"]) html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/TablesGroup -.-> html/tables("Table Structure") html/TablesGroup -.-> html/complex_tbl("Complex Tables") html/TablesGroup -.-> html/tbl_access("Table Accessibility") subgraph Lab Skills html/layout -.-> lab-70862{{"HTML-таблица с нижним колонтитулом"}} html/tables -.-> lab-70862{{"HTML-таблица с нижним колонтитулом"}} html/complex_tbl -.-> lab-70862{{"HTML-таблица с нижним колонтитулом"}} html/tbl_access -.-> lab-70862{{"HTML-таблица с нижним колонтитулом"}} end

Создайте базовую структуру таблицы

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

<!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.