Структурирование HTML-таблиц. Какова роль элементов thead, tbody и tfoot?

структурирование html-таблиц. какова роль элементов thead, tbody и tfoot?

Причины разделения таблиц на части

Подходы, рассматриваемые в данном уроке, на практике встречаются редко. Однако могут стать единственным возможным решением при определенных условиях. Как вы уже знаете, таблицы состоят из строк и ячеек, а так же могут содержать произвольное количество данных.

Иногда нужно распечатать таблицу на принтере и тут возникает первая проблема. Как правило, первые строки несут в себе заголовок, описывающий содержимое ячеек, находящихся на следующих строках. В распечатке заголовочная часть будет присутствовать только на первом листе, что не всегда удобно. Вам придется постоянно поглядывать на первую страницу и вспоминать, что содержится в анализируемом столбце.

Второй проблемой является то, что таблицы могут быть по-настоящему громоздкими. Выводить всё их содержимое на HTML-страницу довольно неудобно. Особенно если на ней присутствуют и другие полезные данные, предназначенные для ознакомления. Такая таблица заставит пользователя скролить колесиком мыши для пропуска всего содержимого.

HTML позволяет решить эти проблемы за счет разделения структуры таблицы на заголовочную часть, тело и итог. Для этого существуют специальные элементы <thead>, <tfoot> и <tbody>.

Заметка
Данные элементы используются не только ради побочных эффектов при распечатке. С помощью CSS их содержимому назначают особые стили, тем самым изменяется визуальное оформление отдельных частей таблицы.

Заголовочная часть. Элемент <thead>

Как и говорилось выше, HTML придает особую значимость элементу <thead>. Его используют для обертывания первых строк, описывающих содержимое ячеек, располагающихся в теле таблицы. При распечатке на принтере, всё содержимое между открывающим тегом <thead> и закрывающим </thead> будет присутствовать на каждом листе.

Элемент <thead> должен располагаться сразу за открывающим тегом <table>, но после <caption> (если он присутствует). Современные браузеры автоматически добавят оставшуюся часть таблицы в <tbody>, но лучше сделать это явным образом.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример создания заголовочной части таблицы</title>
    </head>
    <body>
        <table>
            <caption>Ежедневные расходы</caption>
            <thead>
                <tr>
                    <th>Тип</th>
                    <th>Описание</th>
                    <th>Сумма</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Проезд</td>
                    <td>На работу и обратно</td>
                    <td>40</td>
                </tr>
                <tr>
                    <td>Еда</td>
                    <td>Бизнес-ланч в кафе</td>
                    <td>250</td>
                </tr>
                <tr>
                    <td>Другое</td>
                    <td>Оплата интернета на месяц</td>
                    <td>500</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Итоговое содержимое. Элемент <tfoot>.

Данный элемент является необязательным. Как правило, <tfoot> содержит строки с итоговыми значениями. Например, подсчет общей суммы бухгалтерских операций. Он должен располагаться перед телом таблицы (элемент <tbody>). При показе HTML-разметки всё содержимое, располагающееся между открывающим тегом <tfoot> и закрывающим </tfoot>, будет находиться в конце таблицы.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример создания итоговой части таблицы</title>
    </head>
    <body>
        <table>
            <caption>Ежедневные расходы</caption>
            <thead>
                <tr>
                    <th>Тип</th>
                    <th>Описание</th>
                    <th>Сумма</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Проезд</td>
                    <td>На работу и обратно</td>
                    <td>40</td>
                </tr>
                <tr>
                    <td>Еда</td>
                    <td>Бизнес-ланч в кафе</td>
                    <td>250</td>
                </tr>
                <tr>
                    <td>Другое</td>
                    <td>Оплата интернета на месяц</td>
                    <td>500</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>Итого:</td>
                    <td></td>
                    <td>790</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

Содержимое таблицы. Элемент <tbody>

HTML позволяет не указывать в разметке таблицы элемент <tbody>, если в ней отсутствуют <tfoot> и <thead>. В противном случае это обязательно. Он не имеет какого-либо специфичного поведения. Однако с помощью CSS можно установить максимальную высоту и в случае переполнения информацией будут появляться полосы прокрутки. Это позволит одновременно показывать заголовочную и итоговую часть, а основное содержимое изучать с помощью прокрутки.

В примере, приведенном ниже, мы добавили несколько записей в тело таблицы, а в <head> осуществили вставку стилей для контроля максимальной высоты <tbody>, показа полос прокрутки и улучшения общего восприятия.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример создания итоговой части таблицы</title>
        <style>
            table {
                border-collapse: collapse;
                border: 1px solid black;
            }

            tbody, thead, tfoot, tr {
                display: block;
            }

            td:nth-child(1), th:nth-child(1) {
                display: inline-block;
                padding: 15px 50px;
                width: 40px;
            }

            td:nth-child(2), th:nth-child(2) {
                display: inline-block;
                padding: 15px 50px;
                width: 200px;
            }

            td:nth-child(3), th:nth-child(3) {
                display: inline-block;
                padding: 15px 50px;
                width: 40px;
            }

            thead {
                border-bottom: 1px solid black;
            }

            thead th:nth-child(2) {
                border-right: 1px solid black;
                border-left: 1px solid black;
            }

            tbody {
                max-height: 155px;
                overflow: auto;
            }

            tbody tr {
                border-bottom: 1px dashed darkgray;
            }

            tbody td:nth-child(2) {
                border-right: 1px solid black;
                border-left: 1px solid black;
            }

            tfoot {
                border-top: 1px solid black;
            }
        </style>
    </head>
    <body>
        <table>
            <caption>Ежедневные расходы</caption>
            <thead>
                <tr>
                    <th>Тип</th>
                    <th>Описание</th>
                    <th>Сумма</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Проезд</td>
                    <td>На работу и обратно</td>
                    <td>40</td>
                </tr>
                <tr>
                    <td>Еда</td>
                    <td>Бизнес-ланч в кафе</td>
                    <td>250</td>
                </tr>
                <tr>
                    <td>Займ</td>
                    <td>Занял денег коллеге по работе</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>Покупки</td>
                    <td>Бакалейные товары и бытовая химия</td>
                    <td>1500</td>
                </tr>
                <tr>
                    <td>Другое</td>
                    <td>Оплата интернета на месяц</td>
                    <td>500</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>Итого:</td>
                    <td></td>
                    <td>4290</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>
таблица разделенная на части с помощью специальных элементов
Рис 1. Отображение таблицы с полосами прокрутки.

Последние публикации