W3docs
ru
Войти

Тег HTML `<tfoot>`

The <tfoot> tag defines the footer of the table. Is used together with the <thead> and <tbody> elements. See examples.

Тег `<tfoot>` определяет нижний колонтитул (подвал) таблицы HTML. Он используется вместе с элементами <thead> и <tbody>, которые определяют заголовок и тело таблицы соответственно.

Тег `<tfoot>` должен быть объявлен внутри элемента <table>, после элементов <caption> и <colgroup> (если они есть). Обратите внимание, что в исходном коде `<tfoot>` должен располагаться перед `<tbody>`, хотя браузеры всегда отображают его в нижней части таблицы.

danger

Тег `<tfoot>` должен содержать как минимум один тег <tr>.

success

Элементы `<thead>`, `<tbody>` и `<tfoot>` по умолчанию не влияют на макет таблицы. Используйте свойства CSS для настройки внешнего вида таблицы.

Синтаксис

Тег `<tfoot>` используется парами. Содержимое записывается между открывающим (`<tfoot>`) и закрывающим (`</tfoot>`) тегами.

Тег HTML `<tfoot>`

<table>
  <thead> ... </thead>
  <tfoot>
    <tr>
      <td> ... </td>
    </tr>
  </tfoot>
  <tbody> ... </tbody>
</table>

Пример использования тега HTML `<tfoot>`:

Тег HTML `<tfoot>`

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document.</title>
  </head>
  <body>
    <table style="width: 400px; border-collapse: collapse;" border="1">
      <caption>
        FIFA World Cup 2018 Top Goalscorers
        <hr />
      </caption>
      <thead>
        <tr>
          <th>Name</th>
          <th>Country</th>
          <th>Goal</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th colspan="3">Harry Kane - the best player!</th>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>Harry Kane</td>
          <td>England</td>
          <td>6</td>
        </tr>
        <tr>
          <td>Christiano Ronaldo</td>
          <td>Portugal</td>
          <td>4</td>
        </tr>
        <tr>
          <td>Neymar</td>
          <td>Brazil</td>
          <td>2</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

<!-- Примечание: атрибут border устарел в HTML5. Используйте CSS для стилизации. -->

Результат

tfoot example

Тег `<tfoot>` и другие теги для обобщения содержимого таблицы

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

Используйте элементы `<thead>`, `<tbody>` и `<tfoot>` для структурирования таблиц, содержащих сложные наборы данных. Эти элементы помогают организовать содержимое таблицы. Чтобы включить независимую прокрутку тела таблицы, примените свойства CSS overflow.

Атрибуты

АтрибутЗначениеОписание
alignright, left, center, justify, charУстанавливает горизонтальное выравнивание содержимого внутри элемента `<tfoot>`. Этот атрибут не поддерживается в HTML5.
bgcolorbgcolorУстанавливает цвет фона строк внутри элемента `<tfoot>`. Этот атрибут не поддерживается в HTML5.
charcharacterУказывает выравнивание содержимого внутри элемента `<tfoot>` по заданному символу. Используется только при атрибуте align="char". Этот атрибут не поддерживается в HTML5.
charoffnumberУказывает количество символов, на которое содержимое внутри элемента `<tfoot>` будет смещено от символа, указанного атрибутом char. Используется только при атрибуте align="char". Этот атрибут не поддерживается в HTML5.
valigntop, bottom, middle, baselineУказывает вертикальное выравнивание содержимого внутри элемента `<tfoot>`. Этот атрибут не поддерживается в HTML5.

Примечание: Все перечисленные выше атрибуты устарели в HTML5. Используйте CSS для стилизации.

Тег `<tfoot>` также поддерживает Глобальные атрибуты и Атрибуты событий.

Как стилизовать тег HTML `<tfoot>`

tfoot {
  background-color: #f2f2f2;
  font-weight: bold;
}

Практика

Практика

Какова цель тега HTML tfoot и где он обычно размещается в таблице?