HTML-тег <tbody>

HTML-тег <tbody> используется для группировки содержимого таблицы. Он размещается внутри элемента <table> и содержит строки( <tr> ) с данными таблицы( <td> ) или ячейки заголовков( <th> ). Тег <tbody> помогает структурировать и организовать таблицу в отдельные разделы, особенно в сочетании с <thead> и <tfoot> .

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

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

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

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

Тег <tbody> оборачивает строки, содержащие основные данные таблицы.

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

Вот простой пример таблицы с <thead> , <tbody> , и <tfoot> : 

<!DOCTYPE html>
<html>
    <body>
        <h2>Sales Data</h2>
        <table border="1">
            <thead>
                <tr>
                    <th>Product</th>
                    <th>Quantity</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Laptops</td>
                    <td>50</td>
                    <td>$500</td>
                </tr>
                <tr>
                    <td>Phones</td>
                    <td>100</td>
                    <td>$300</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="2">Total</td>
                    <td>$80,000</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>
Пример таблицы с использованием тега tbody

Пояснение: <thead> содержит заголовки таблиц, <tbody> содержит строки данных, а <tfoot> содержит сводную информацию.

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

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

<!DOCTYPE html>
<html>
    <head>
        <style>
            table {
                border-collapse: collapse;
                width: 100%;
            }
            th, td {
                border: 1px solid #ddd;
                padding: 8px;
                text-align: center;
            }
            thead th {
                font-weight: bold;
            }
            tbody tr:nth-child(odd) {
                background-color: #f9f9f9;
            }
            tbody tr:nth-child(even) {
                background-color: #dfdfdf;
            }
        </style>
    </head>
    <body>
        <h2>Styled Table with tbody</h2>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>City</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Alice</td>
                    <td>30</td>
                    <td>New York</td>
                </tr>
                <tr>
                    <td>Bob</td>
                    <td>25</td>
                    <td>Los Angeles</td>
                </tr>
                <tr>
                    <td>Charlie</td>
                    <td>24</td>
                    <td>New York</td>
                </tr>
                <tr>
                    <td>Distrob</td>
                    <td>27</td>
                    <td>Los Angeles</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
Оформление тега tbody с помощью CSS

Результат: строки в разделе <tbody> оформлены с использованием чередующихся цветов фона для лучшей читаемости.

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

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