Тег <tfoot> HTML нижний колонтитул таблицы

Рейтинг: 4 из 5, голосов 7

07 января 2018 г.

Тег <tfoot> определяет границы нижнего колонтитула таблицы HTML. Используется в HTML таблицах определенных тегом <table>.

К группе тегов отвечающих за различные части HTML таблиц относятся: тег <thead> - верхний колонтитул, <tbody> - основная часть, <tfoot> - нижний колонтитул.

Браузеры могут использовать разделение таблицы на смысловые части, например, выводя при печати области колонтитулов <thead> и <tfoot> на каждой напечатанной странице.

HTML тег <tfoot> должен располагаться внутри тега <table> после тегов <caption>, <col>, <colgroup>, <thead> и перед тегом <tbody>.

Внутри тега <tfoot> должен быть один или несколько элементов <tr> - строк таблицы.

Стоит отметить, что теги <thead>, <tbody>, <tfoot> по умолчанию не изменяют стили таблицы. Для этого используйте CSS.

Подробнее про создание таблиц читайте в статье: Создание таблиц в HTML. Все о HTML таблицах.

Синтаксис

<tfoot>элементы tr с HTML контентом</tfoot>

Отображение в браузере

Ячейка 1	Ячейка 2
Ячейка 5	Ячейка 6
Ячейка 7	Ячейка 8
Ячейка 3	Ячейка 4

Пример использования <tfoot> в HTML коде

<!DOCTYPE html>
<html>
  <head>
    <title>Таблица с tfoot</title>
  </head>
  <body>
    <table>
      <!-- Ячейки верхнего колонтитула -->
      <thead>
        <tr>
          <th>Ячейка 1</th>
          <th>Ячейка 2</th>
        </tr>
      </thead>
      <tfoot>
        <!-- Ячейки нижнего колонтитула -->
        <tr>
          <th>Ячейка 5</th>
          <th>Ячейка 6</th>
        </tr>
        <tr>
          <td>Ячейка 7</td>
          <td>Ячейка 8</td>
        </tr>
      </tfoot>
      <tbody>
        <!-- Основная часть таблицы -->
        <tr>
          <td>Ячейка 3</td>
          <td>Ячейка 4</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Поддержка браузерами

Тег
<tfoot>	Да	Да	Да	Да	Да

Атрибуты <tfoot>

В HTML5 у тега <tfoot> нет атрибутов.

Устаревшие атрибуты

Атрибут	Значения	Описание
align	left right center justify	Задает правило выравнивания содержимого по горизонтали. В HTML5 используйте CSS.
valign	top middle bottom baseline	Задает правило выравнивания содержимого по вертикали. В HTML5 используйте CSS.

by Lebedev