HTML-тег <th>

HTML-тег <th> используется для определения ячеек заголовков в HTML-таблице. Эти ячейки обычно располагаются в верхней части каждого столбца или в начале каждой строки и содержат контекстную информацию о данных в таблице. По умолчанию текст внутри элемента <th> отображается полужирным шрифтом и выравнивается по центру.

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

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

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

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
    </tr>
</table>

Ячейки <th> действуют как заголовки для соответствующих столбцов.

Пример таблицы с ячейками <th>

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

<!DOCTYPE html>
<html>
    <body>
        <h2>Employee Data</h2>
        <table border="1">
            <tr>
                <th>Name</th>
                <th>Department</th>
                <th>Salary</th>
            </tr>
            <tr>
                <td>Alice</td>
                <td>Engineering</td>
                <td>$100,000</td>
            </tr>
            <tr>
                <td>Bob</td>
                <td>Marketing</td>
                <td>$90,000</td>
            </tr>
        </table>
    </body>
</html>

Пояснение: Элементы <th> предоставляют заголовки для столбцов «Имя», «Отдел» и «Зарплата».

Атрибуты HTML-тега <th>

colspan: указывает количество столбцов, которые должна охватывать ячейка заголовка.
rowspan: указывает количество строк, которые должна охватывать ячейка заголовка.
Область действия: определяет, применяется ли заголовок к строке, столбцу или группе строк/столбцов(значения: col , row , colgroup , rowgroup ).
abbr: Предоставляет сокращенную версию текста заголовка для удобства.
Глобальные атрибуты: поддерживает все глобальные атрибуты, такие как id , class и style .
Атрибуты событий: поддерживает такие атрибуты событий, как onclick , onmouseover и onfocus .

Пример с colspan, rowspan и scope

В следующем примере используются расширенные атрибуты, такие как colspan , rowspan и scope для создания более сложной таблицы:

<!DOCTYPE html>
<html>
    <body>
        <h2>Sales Report</h2>
        <table border="1">
            <tr>
                <th colspan="2" scope="colgroup">Product</th>
                <th rowspan="2" scope="col">Total Sales</th>
            </tr>
            <tr>
                <th scope="col">Name</th>
                <th scope="col">Category</th>
            </tr>
            <tr>
                <td>Laptop</td>
                <td>Electronics</td>
                <td>$10,000</td>
            </tr>
            <tr>
                <td>Chair</td>
                <td>Furniture</td>
                <td>$5,000</td>
            </tr>
        </table>
    </body>
</html>

Пояснение: Атрибут colspan охватывает два столбца для заголовка «Продукт», а атрибут rowspan — две строки для заголовка «Общая сумма продаж». Атрибут scope улучшает доступность, указывая, к каким ячейкам относятся заголовки.

Стилизация ячеек <th> с помощью CSS

Настройте внешний вид ячеек заголовков с помощью CSS:

<!DOCTYPE html>
<html>
    <head>
        <style>
            table {
                border-collapse: collapse;
                width: 100%;
            }
            th, td {
                border: 1px solid #ddd;
                padding: 8px;
            }
            th {
                background-color: #f4f4f4;
                font-weight: bold;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h2>Styled Table Headers</h2>
        <table>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>City</th>
            </tr>
            <tr>
                <td>Alice</td>
                <td>25</td>
                <td>New York</td>
            </tr>
            <tr>
                <td>Bob</td>
                <td>30</td>
                <td>Los Angeles</td>
            </tr>
        </table>
    </body>
</html>

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

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

Таблицы данных: используйте <th> для маркировки столбцов и строк, предоставляя контекст для табличных данных.
Доступные таблицы: Улучшите навигацию с помощью экранного диктора с помощью атрибутов scope и abbr .
Стилизованные заголовки: визуально различайте заголовки, чтобы улучшить читаемость и удобство использования таблицы.
Сложные таблицы: Объедините colspan и rowspan для многоуровневых заголовков в расширенных макетах.