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

У таблицы с правильной структурой обычно должен быть хотя бы один ряд ячеек заголовка таблицы, передающий смысл или объясняющий данные в столбцах ячеек ниже. Таблица, во многом как и веб-страница, должна быть разделена на заголовок таблицы, элемент <thead> и тело таблицы, элемент <tbody>, можно использовать еще подвал таблицы, элемент <tfoot>, который, как ни странно, должен располагаться сразу после элемента заголовка таблица, если он есть. Несмотря на порядок расположения элементов, современные браузеры отобразят элемент подвала таблицы самым последним в таблице. В элементе подвала таблицы можно подвести итоги или показать сводные данные по каждому столбцу.

Пример таблицы с правильной структурой показан ниже, в нем для краткости убраны закрывающие теги, необязательные для HTML5:

<table>
        <caption>Top Selling Processors</caption>
        <thead>
                <tr>
                        <th>Processor
                        <th>Speed
                        <th>Cores
                        <th>L3 Cache Size
        <tbody>
                <tr>
                        <td>Intel Core i7-2600K
                        <td>3.4 GHz
                        <td>4
                        <td>8 MB
                <tr>
                        <td>AMD Phenom II X6 1100T
                        <td>3.3 GHz
                        <td>6
                        <td>6 MB
</table>

Примечание Дежурки: Мы создали наглядный пример таблицы, окрасив элемент подписи в белый цвет, элементы ячеек заголовка — в светло-серый цвет и элемент подвала таблицы — в темно-серый цвет. Обратите внимание на расположение элемента подвала таблицы в коде HTML и в демонстрации. В данном примере элемент подвала таблицы объединяет в себе все 4 столбца ячеек, но он может не делать это и разделяться на ячейки, как элемент заголовка таблицы.

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

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Создание идеальных адаптивных фигур с помощью единицы измерения CSS vw
• Верстка столбцами в стиле социального интернет-сервиса Pinterest на CSS
• Создание прокручивающейся таблицы товаров