<tfoot> - HTML-елемент підвалу таблиці

HTML-елемент <tfoot> визначає набір рядків, що підсумовують стовпці таблиці.

Елемент <tfoot> використовується для групування підсумкового вмісту в HTML-таблиці. Він повинен бути прямим нащадком елемента <table> і може з'являтися після будь-яких елементів <caption>, <colgroup>, <thead>, <tbody>, або <tr>.

Разом з <thead> та <tbody>, <tfoot> надає семантичну структуру таблиці, що корисно для доступності (наприклад, для скрінрідерів) та для стилізації.

У таблиці може бути лише один елемент <tfoot>. Незалежно від його положення в коді, браузери завжди відображатимуть його внизу таблиці.

<table>
  <tfoot>...</tfoot>
</table>

<table>
  <caption>Щомісячні витрати</caption>
  <thead>
    <tr>
      <th>Місяць</th>
      <th>Сума</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Січень</td>
      <td>1500 грн</td>
    </tr>
    <tr>
      <td>Лютий</td>
      <td>1800 грн</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Всього</td>
      <td>3300 грн</td>
    </tr>
  </tfoot>
</table>

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 5px;
}
thead, tfoot {
  background-color: #f2f2f2;
  font-weight: bold;
}

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