<tfoot>: Элемент подвала таблицы

Элемент <tfoot> HTML содержит набор строк таблицы (<tr> элементы), указывающий, что они образуют подвал таблицы с информацией о столбцах таблицы. Обычно это сводка столбцов, например, сумма заданных чисел в столбце.

Этот элемент включает глобальные атрибуты.

Следующие атрибуты устарели и не должны использоваться. Они документированы ниже для справки при обновлении существующего кода и только для исторической справки.

align Устаревший

Определяет горизонтальное выравнивание каждой ячейки подвала. Возможные значения перечисления (перечисления) — left, center, right, justify, и char. При поддержке, значение char выравнивает текстовое содержимое по символу, определенному в атрибуте char, и по смещению, определенному атрибутом charoff. Вместо этого используйте свойство CSS text-align, так как этот атрибут устарел.

bgcolor Устаревший

Определяет цвет фона каждой ячейки подвала. Значение — HTML-цвет; либо 6-значный шестнадцатеричный код RGB (шестнадцатеричный код RGB), с префиксом '#', либо ключевое слово цвета (имя цвета). Другие значения CSS <color> не поддерживаются. Вместо этого используйте свойство CSS background-color, так как этот атрибут устарел.

char Устаревший

Ничего не делает. Изначально предназначался для указания выравнивания содержимого к символу в каждой ячейке подвала. Типичные значения включают точку (.) при попытке выравнивания чисел или денежных значений. Если align не установлено в char, этот атрибут игнорируется.

charoff Устаревший

Ничего не делает. Изначально предназначался для указания количества символов для смещения содержимого ячейки подвала от символа выравнивания, указанного атрибутом char.

valign Устаревший

Определяет вертикальное выравнивание каждой ячейки подвала. Возможные значения перечисления (перечисления) — baseline, bottom, middle, и top. Вместо этого используйте свойство CSS vertical-align, так как этот атрибут устарел.

• Элемент <tfoot> размещается после любого элемента <caption>, <colgroup>, <thead>, <tbody> и <tr>.
• Вместе со связанными элементами <thead> и <tbody>, элемент <tfoot> предоставляет полезную семантическую информацию и может использоваться при рендеринге как для экрана, так и для печати. Указание таких групп содержимого таблицы также предоставляет важную контекстную информацию для вспомогательных технологий, включая экранные читатели и поисковые системы.
• При печати документа, в случае многостраничной таблицы, подвал таблицы обычно указывает информацию, которая выводится как промежуточная сводка на каждой странице.

См. <table> для примера полной таблицы, демонстрирующего общие стандарты и рекомендации.

Этот пример демонстрирует таблицу, разделенную на секцию заголовка со заголовками столбцов, секцию тела с основными данными таблицы и секцию подвала, обобщающую данные одного столбца.

HTML

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

Для размещения ячеек подвала в соответствующих столбцах используется атрибут colspan элемента <th> для объединения ячейки заголовка строки по первым трём столбцам таблицы. Единственная ячейка данных (<td>) в подвале автоматически размещается в правильном месте, то есть в четвёртом столбце, при этом пропущенное значение атрибута colspan по умолчанию равно 1. Кроме того, атрибут scope установлен в значение row в ячейке заголовка (<th>) в подвале, чтобы явно указать, что эта ячейка заголовка подвала относится к ячейкам таблицы в той же строке, что в нашем примере является единственной ячейкой данных в строке подвала, которая содержит вычисленное среднее значение.

<table>
  <thead>
    <tr>
      <th>Student ID</th>
      <th>Name</th>
      <th>Major</th>
      <th>Credits</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
      <td>Computer Science</td>
      <td>240</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
      <td>Russian Literature</td>
      <td>220</td>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
      <td>Astrophysics</td>
      <td>260</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="3" scope="row">Average Credits</th>
      <td>240</td>
    </tr>
  </tfoot>
</table>

CSS

Используется базовая CSS-стилизация для выделения ячеек подвала, чтобы они отличались от данных в теле таблицы.

tfoot {
  border-top: 3px dotted rgb(160 160 160);
  background-color: #2c5e77;
  color: #fff;
}

tfoot th {
  text-align: right;
}

tfoot td {
  font-weight: bold;
}

thead {
  border-bottom: 2px solid rgb(160 160 160);
  background-color: #2c5e77;
  color: #fff;
}

tbody {
  background-color: #e4f0f5;
}

Результат

• Учебник: Таблицы HTML
• <caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <th>, <thead>, <tr>: Другие элементы, связанные с таблицами
• background-color: Свойство CSS для задания цвета фона каждой ячейки подвала
• border: Свойство CSS для управления границами ячеек подвала
• text-align: Свойство CSS для горизонтального выравнивания содержимого каждой ячейки подвала
• vertical-align: Свойство CSS для вертикального выравнивания содержимого каждой ячейки подвала