HTML-тег <tfoot>

HTML-тег <tfoot> используется для группировки содержимого нижнего колонтитула HTML-таблицы. Как правило, он содержит сводную или обобщенную информацию, например, итоги или другие заключительные данные, относящиеся к содержимому таблицы. Тег <tfoot> размещается внутри элемента <table> и используется вместе с тегами <thead> (заголовок таблицы) и <tbody> (тело таблицы) для создания хорошо структурированных таблиц.

Когда браузеры отображают таблицы, содержимое <tfoot> отображается после <tbody> , но оно определено до <tbody> в разметке HTML в семантических и организационных целях.

Базовый синтаксис HTML-тега <tfoot>

Базовая структура таблицы с тегом <tfoot> следующая: 

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Footer 1</td>
            <td>Footer 2</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
    </tbody>
</table>

<tfoot> содержит строки( <tr> ) и ячейки( <td> или <th> ), аналогичные другим разделам таблицы.

Пример таблицы с использованием тега <tfoot>

Вот пример таблицы, обобщающей данные о продажах, с нижним колонтитулом для общего объема продаж: 

<!DOCTYPE html>
<html>
    <body>
        <h2>Sales Report</h2>
        <table border="1">
            <thead>
                <tr>
                    <th>Product</th>
                    <th>Quantity</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td colspan="2">Total</td>
                    <td>$3000</td>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>Laptop</td>
Пример таблицы с использованием тега tfoot

Пояснение: Строка нижнего колонтитула в <tfoot> суммирует данные таблицы, предоставляя общую сумму продаж.

Стилизация тега <tfoot> с помощью CSS

Тег <tfoot> можно стилизовать независимо, чтобы отличать его от заголовка и тела таблицы: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            table {
                border-collapse: collapse;
                width: 100%;
            }
            th, td {
                border: 1px solid #ddd;
                padding: 8px;
                text-align: center;
            }
            thead th {
                background-color: #f4f4f4;
                font-weight: bold;
            }
            tfoot td {
                background-color: #f9f9f9;
                font-weight: bold;
                font-size: 16px;
            }
        </style>
    </head>
    <body>
        <h2>Styled Table Footer</h2>
        <table>
            <thead>
                <tr>
                    <th>Product</th>
                    <th>Quantity</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td colspan="2">Total</td>
                    <td>$3000</td>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>Laptop</td>
                    <td>10</td>
                    <td>$2000</td>
                </tr>
                <tr>
                    <td>Phone</td>
                    <td>5</td>
                    <td>$1000</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
Оформление тега tfoot с помощью CSS

Результат: нижний колонтитул выделен светлым фоном и жирным текстом, чтобы отличить его от основной части таблицы.

Практическое применение тега <tfoot>

  • Сводные строки: используйте <tfoot> для отображения итогов, средних значений или других сводных данных для таблицы.
  • Оформление нижнего колонтитула: применяйте различные стили к содержимому нижнего колонтитула для улучшения его читабельности.
  • Доступность: Улучшите семантику таблиц и улучшите совместимость с программами чтения с экрана за счет группировки строк нижнего колонтитула.
  • Динамические таблицы: заполняйте нижний колонтитул динамически, используя JavaScript для приложений, управляемых данными.