HTML тег <tfoot>

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

Описание

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

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

Браузеры могут использовать эти элементы для включения прокрутки тела таблицы, независимо от заголовка и нижнего колонтитула. Так же при выводе на печать большой таблицы, которая занимает несколько страниц, эти элементы могут включить заголовок и нижний колонтитул, которые будут напечатаны в верхней и нижней части каждой страницы.

Элемент <tfoot> должен быть расположен после элементов <caption> и <colgroup> (если таковые присутствуют) и <thead>, но до любого элемента <tbody>.

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

Атрибуты

Тег <tfoot> поддерживает Глобальные атрибуты и События

Стиль по умолчанию

tfoot {
    display: table-footer-group;
    vertical-align: middle;
    border-color: inherit;
} 

Пример

<table border="1" style="width: 200px;">
  <caption>Ежемесячные сбережения</caption>
  <colgroup>
    <col span="1" style="background-color: silver">
    <col style="background-color: #66FF99">
  </colgroup>
  <thead>
    <tr>
      <th>Месяц</th>
      <th>Доход</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Сумма</td>
      <td>180р</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Январь</td>
      <td>100р</td>
    </tr>
    <tr>
      <td>Февраль</td>
      <td>80р</td>
    </tr>
  </tbody>
</table> 

Результат данного примера в окне браузера: