Тег <tfoot>

Тег <tfoot> (укр. — “підвал таблиці”, “підсумок таблиці”) в HTML використовується для групування рядків, які містять підсумкову інформацію таблиці: загальні підрахунки, примітки, додаткові коментарі тощо.

Разом із тегами <thead> та <tbody> допомагає створювати логічно структуровані таблиці та полегшує обробку таблиць браузером, скрінрідерами й пошуковими системами.

Атрибути

Специфічні атрибути

Тег <tfoot> не має специфічних (унікальних) атрибутів.

Глобальні атрибути

Тег <tfoot> підтримує всі глобальні атрибути HTML:

  • id — унікальний ідентифікатор. Наприклад:
<tfoot id="summary">
    ...
</tfoot>
  • class — для CSS-стилізації. Наприклад:
<tfoot class="table-footer">
    ...
</tfoot>
  • style — для інлайн-стилів. Наприклад:
<tfoot style="background-color: #eee;">
    ...
</tfoot>
  • lang — вказує мову вмісту. Наприклад:
<tfoot lang="uk">
    ...
</tfoot>

Приклад використання

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Приклад використання tfoot</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
        }
        thead {
            background-color: #4CAF50;
            color: white;
        }
        tfoot {
            background-color: #f1f1f1;
            font-weight: bold;
        }
    </style>
</head>
<body>

<h2>Таблиця з tfoot:</h2>

<table>
    <thead>
        <tr>
            <th>Товар</th>
            <th>Кількість</th>
            <th>Ціна</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ноутбук</td>
            <td>2</td>
            <td>1500</td>
        </tr>
        <tr>
            <td>Смартфон</td>
            <td>3</td>
            <td>800</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Разом:</td>
            <td>5</td>
            <td>5400</td>
        </tr>
    </tfoot>
</table>

</body>
</html>

Додаткові моменти

  • Тег <tfoot> повинен знаходитись перед <tbody> у вихідному HTML-коді для оптимальної обробки браузером, але візуально виводиться після тіла таблиці.
  • Особливо корисний для підрахунку сум, показу загальних підсумків або коментарів до таблиці.
  • Полегшує обробку таблиць для скрінрідерів та підвищує доступність.
  • Дозволяє окремо стилізувати підсумкові рядки.
  • Може містити кілька рядків <tr>.
  • Повністю підтримується усіма сучасними браузерами.