HTML таг tfoot

Пример

Кратък пример как се използва тагът <tfoot>.

<table class="table table-striped">
  <thead class="table-dark">
    <tr>
      <th>Продукт</th>
      <th class="text-end">Количество</th>
      <th class="text-end">Цена (лв.)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Кафе</td>
      <td class="text-end">2</td>
      <td class="text-end">10.00</td>
    </tr>
    <tr>
      <td>Чай</td>
      <td class="text-end">1</td>
      <td class="text-end">4.50</td>
    </tr>
  </tbody>
  <tfoot class="table-light">
    <tr>
      <th scope="row">Общо</th>
      <td class="text-end">3</td>
      <td class="text-end">14.50</td>
    </tr>
  </tfoot>
</table>

Дефиниция и употреба

Елементът <tfoot> се използва за групиране на съдържанието в долната част на HTML таблица. Обикновено съдържа обобщения, тотали, бележки, бутони за действие или друга информация, която се отнася за цялата таблица.

<tfoot> трябва да бъде директен потомък на елемента <table> и да съдържа един или повече редове <tr>, в които се използват клетки <td> и/или <th>. Структурата на таблицата обикновено е: <caption> (по избор), <colgroup> (по избор), <thead>, <tfoot> и един или повече <tbody> елементи.

Въпреки че визуално футърът се показва в края на таблицата, по спецификация <tfoot> може да бъде поставен в кода преди <tbody>. Това позволява на браузърите да изчисляват и показват обобщенията, преди да е заредено цялото таблично съдържание (полезно при големи таблици).

<tfoot> няма собствени специфични атрибути, но поддържа всички глобални HTML атрибути (като id, class, style, data-* и др.), което позволява лесно стилизиране и манипулиране чрез CSS и JavaScript. В комбинация с Bootstrap 5.3 често се използват класове като .table-light, .table-dark, .text-end и др. за визуално отделяне на футъра от останалата част на таблицата.

Browser Support

Browser	Поддръжка
Chrome	✔️
Firefox	✔️
Edge	✔️
Safari	✔️
Opera	✔️

Атрибути