<tfoot> HTML-элемент нижней части таблицы

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

Попробуйте

<table>
  <caption>
    Council budget (in £) 2018
  </caption>
  <thead>
    <tr>
      <th scope="col">Items</th>
      <th scope="col">Expenditure</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Donuts</th>
      <td>3,000</td>
    </tr>
    <tr>
      <th scope="row">Stationery</th>
      <td>18,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Totals</th>
      <td>21,000</td>
    </tr>
  </tfoot>
</table>

thead,
tfoot {
  background-color: #2c5e77;
  color: white;
}

tbody {
  background-color: #e4f0f5;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

td {
  text-align: center;
}

Атрибуты

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

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

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

align

Задаёт горизонтальное выравнивание каждой ячейки нижней части таблицы. Возможные перечислимые значения: left, center, right, justify и char. Если поддерживается, значение char выравнивает текстовое содержимое по символу, заданному атрибутом char, и со смещением, заданным атрибутом charoff. Вместо этого используйте CSS-свойство text-align, так как этот атрибут устарел.

bgcolor

Задаёт цвет фона каждой ячейки нижней части таблицы. Значением является цвет HTML: либо шестизначный шестнадцатеричный код RGB с префиксом #, либо ключевое слово цвета. Другие значения <color> CSS не поддерживаются. Вместо этого используйте 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>) со средним значением, рассчитанным на основе значений в столбце «Кредиты».

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

<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: white;
}

tfoot th {
  text-align: right;
}

tfoot td {
  font-weight: bold;
}

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

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-свойство для вертикального выравнивания содержимого каждой ячейки нижней части таблицы