Зачем использовать <thead>и - PullRequest
Новая
       1

Зачем использовать <thead>и

3 голосов
/ 06 февраля 2020

В настоящее время я читаю "HTML & CSS: разработка и создание веб-сайтов" Джона Дакетта, а в главе 6, посвященной таблицам, приведен следующий пример: 

<!DOCTYPE html>
<html>
    <head>
        <title>Tables</title>
    </head>

    <body>
        <table>
            <thead>
                <tr>
                    <th scope="col"></th>
                    <th scope="col">Home starter hosting</th>
                    <th scope="col">Premium business hosting</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <th scope="row">Disk space</th>
                    <td>250mb</td>
                    <td>1gb</td>
                </tr>

                <tr>
                    <th scope="row">Bandwidth</th>
                    <td>5gb per month</td>
                    <td>50gb per month</td>
                </tr>

                <tr>
                    <th scope="row">Email accounts</th>
                    <td>3</td>
                    <td>10</td>
                </tr>

                <tr>
                    <th scope="row">Server</th>
                    <td>Shared</td>
                    <td>VPS</td>
                </tr>

                <tr>
                    <th scope="row">Support</th>
                    <td>Email</td>
                    <td>Telephone and email</td>
                </tr>

                <tr>
                    <th scope="row">Setup</th>
                    <td>Free</td>
                    <td>Free</td>
                </tr>

                <tr>
                    <th scope="row">FTP accounts</th>
                    <td>1</td>
                    <td>5</td>
                </tr>
            </tbody>

            <tfoot>
                <tr>
                    <td></td>
                    <td colspan="2">Sign up now and save 10%!</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

Я прочитал здесь , что элемент <thead> определяет набор строк, определяющих заголовок столбцов таблицы. И scope="col" на <th> элемент используется, чтобы указать, что это заголовок для столбца. Мой вопрос: действительно ли нам нужно использовать оба или достаточно одного из них? Может ли <thead> делать / делать то, что scope="col" не может / не может делать или наоборот?

Ответы [ 2 ]

1 голос
/ 06 февраля 2020

Важным аспектом здесь является доступность : при использовании th элементов как сверху, так и слева с соответствующими scope атрибутами (столбец / строка), программы чтения с экрана «понимают» (и читают / выводят) в некотором роде) что для каждого td есть два заголовка - один сверху и один слева. Для этого важно не элемент thead (который некоторые браузеры даже добавляют автоматически, если он не включен в исходный код, но который невозможно добавить для столбца), а элементы th, которые указывают ячейки заголовка.

1 голос
/ 06 февраля 2020

В то время как элемент <th> определяет первую строку вашей таблицы в качестве заголовка (например, путем присвоения ей другого стиля), три тега <thead><tbody><tfoot> определяют структуру вашей таблицы. Одним из примеров является то, что некоторые браузеры включают прокрутку тела таблицы независимо от верхнего и нижнего колонтитула.

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

...