0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#Руководства</a></p>
1
<p><a>#Руководства</a></p>
2
<ul><li>28 апр 2021</li>
2
<ul><li>28 апр 2021</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Учимся верстать таблицы так, чтобы их верно понимали браузеры, поисковики и люди с ограниченными возможностями.</p>
4
</ul><p>Учимся верстать таблицы так, чтобы их верно понимали браузеры, поисковики и люди с ограниченными возможностями.</p>
5
<p>: colette / respawn entertainment, oculus</p>
5
<p>: colette / respawn entertainment, oculus</p>
6
<p>Frontend-разработчик, программист, дизайнер. Три года в разработке сайтов и приложений, около девяти - в дизайне. Был графдизайнером в языковой школе ILS и разработчиком в IT-компании IVIT. Сейчас преподаёт в Skillbox.</p>
6
<p>Frontend-разработчик, программист, дизайнер. Три года в разработке сайтов и приложений, около девяти - в дизайне. Был графдизайнером в языковой школе ILS и разработчиком в IT-компании IVIT. Сейчас преподаёт в Skillbox.</p>
7
<p>Практика показывает, что большинство разработчиков верстают таблицы HTML неверно - используют только теги строк и ячеек (<tr>, <td>).</p>
7
<p>Практика показывает, что большинство разработчиков верстают таблицы HTML неверно - используют только теги строк и ячеек (<tr>, <td>).</p>
8
<p>Из этой статьи вы узнаете, как верстать таблицы с учётом не только синтаксиса, но и семантики - то есть обозначать нужные части таблицы тегами, которые отражают их содержание.</p>
8
<p>Из этой статьи вы узнаете, как верстать таблицы с учётом не только синтаксиса, но и семантики - то есть обозначать нужные части таблицы тегами, которые отражают их содержание.</p>
9
<p><a>Семантический подход</a>к вёрстке подразумевает использование HTML-тегов в соответствии с их семантикой (предназначением), а его суть заключается в верности выбора тегов и их взаимного расположения.</p>
9
<p><a>Семантический подход</a>к вёрстке подразумевает использование HTML-тегов в соответствии с их семантикой (предназначением), а его суть заключается в верности выбора тегов и их взаимного расположения.</p>
10
<p>Семантические теги передают смысл (или обозначают важность) содержащегося в них контента.</p>
10
<p>Семантические теги передают смысл (или обозначают важность) содержащегося в них контента.</p>
11
<p>Семантический подход - противоположность визуальному, при котором важно только то, как HTML-страница выглядит.</p>
11
<p>Семантический подход - противоположность визуальному, при котором важно только то, как HTML-страница выглядит.</p>
12
<p><strong>Почему семантика так важна</strong></p>
12
<p><strong>Почему семантика так важна</strong></p>
13
<p>Она повышает доступность контента. Тогда его лучше понимают:</p>
13
<p>Она повышает доступность контента. Тогда его лучше понимают:</p>
14
<ul><li><strong>поисковые роботы</strong>(чем понятнее для них контент сайта, тем корректнее он представлен в поисковой выдаче и тем проще его найти пользователям);</li>
14
<ul><li><strong>поисковые роботы</strong>(чем понятнее для них контент сайта, тем корректнее он представлен в поисковой выдаче и тем проще его найти пользователям);</li>
15
<li><strong>браузеры и помощники для пользователей с ограниченными возможностями</strong>(например, программы, которые читают информацию с экрана, - скринридеры).</li>
15
<li><strong>браузеры и помощники для пользователей с ограниченными возможностями</strong>(например, программы, которые читают информацию с экрана, - скринридеры).</li>
16
</ul><p>Семантически верно размеченный контент может выглядеть абсолютно так же, как и свёрстанный без учёта семантики. Это касается любых элементов на HTML-странице.</p>
16
</ul><p>Семантически верно размеченный контент может выглядеть абсолютно так же, как и свёрстанный без учёта семантики. Это касается любых элементов на HTML-странице.</p>
17
<p>Так, можно использовать для всех них тег <div>, но он не обладает семантикой, никак не обозначает смысл своего содержимого. Поэтому мы применяем для заголовков теги H1… H6, для таблицы - <table>, <caption>, <thead>, <tbody>, <tfoot>, <th>. И так далее.</p>
17
<p>Так, можно использовать для всех них тег <div>, но он не обладает семантикой, никак не обозначает смысл своего содержимого. Поэтому мы применяем для заголовков теги H1… H6, для таблицы - <table>, <caption>, <thead>, <tbody>, <tfoot>, <th>. И так далее.</p>
18
<p>Рассмотрим, какие теги отвечают за вёрстку таблиц, когда и зачем нужен каждый.</p>
18
<p>Рассмотрим, какие теги отвечают за вёрстку таблиц, когда и зачем нужен каждый.</p>
19
<p>Каждая таблица состоит из строк и ячеек, а задаётся тегом <table> - это контейнер для остальных тегов таблицы.</p>
19
<p>Каждая таблица состоит из строк и ячеек, а задаётся тегом <table> - это контейнер для остальных тегов таблицы.</p>
20
<p>Тег <tr> образует контейнер для создания строки таблицы. Каждая ячейка в такой строке устанавливается с помощью тега <td> (хотя первая может быть задана и тегом <th>).</p>
20
<p>Тег <tr> образует контейнер для создания строки таблицы. Каждая ячейка в такой строке устанавливается с помощью тега <td> (хотя первая может быть задана и тегом <th>).</p>
21
<p><strong>Важно понимать.</strong>Дочерними элементами строки могут быть только ячейки <td> (и заголовочная ячейка <th>). А сама строка <tr> дочерним элементом ячейки быть не может. Это ограничивает возможную вложенность тегов.</p>
21
<p><strong>Важно понимать.</strong>Дочерними элементами строки могут быть только ячейки <td> (и заголовочная ячейка <th>). А сама строка <tr> дочерним элементом ячейки быть не может. Это ограничивает возможную вложенность тегов.</p>
22
<p>Рассмотрим пример:</p>
22
<p>Рассмотрим пример:</p>
23
<a></a><p>Мы видим три строки (элементы <tr>). В каждой из строк по три ячейки (<td>). Представим это HTML-кодом:</p>
23
<a></a><p>Мы видим три строки (элементы <tr>). В каждой из строк по три ячейки (<td>). Представим это HTML-кодом:</p>
24
<table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table><p>Ячейки можно объединять (растягивать по горизонтали и вертикали) с помощью специальных атрибутов. При этом поглощаемые ячейки задавать своими тегами уже не придётся.</p>
24
<table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table><p>Ячейки можно объединять (растягивать по горизонтали и вертикали) с помощью специальных атрибутов. При этом поглощаемые ячейки задавать своими тегами уже не придётся.</p>
25
<p>Столбцы таблицы объединяются атрибутом colspan, а строки - атрибутом rowspan.</p>
25
<p>Столбцы таблицы объединяются атрибутом colspan, а строки - атрибутом rowspan.</p>
26
<p><strong>И тут важно не запутаться:</strong></p>
26
<p><strong>И тут важно не запутаться:</strong></p>
27
<p>Атрибут colspan тегов <td> и <th> объединяет ячейки по горизонтали (то есть ячейки одной строки). Значение colspan указывает, сколько столбцов пересекает ячейка.</p>
27
<p>Атрибут colspan тегов <td> и <th> объединяет ячейки по горизонтали (то есть ячейки одной строки). Значение colspan указывает, сколько столбцов пересекает ячейка.</p>
28
<p>Атрибут rowspan тегов <td> и <th> объединяет ячейки по вертикали (то есть ячейки разных строк). Значение rowspan задаёт, через сколько строк проходит ячейка.</p>
28
<p>Атрибут rowspan тегов <td> и <th> объединяет ячейки по вертикали (то есть ячейки разных строк). Значение rowspan задаёт, через сколько строк проходит ячейка.</p>
29
<p>Рассмотрим пару примеров:</p>
29
<p>Рассмотрим пару примеров:</p>
30
<p>Вторая ячейка первой строки пересекает два столбца. То есть она растянулась по горизонтали и приняла в себя третью ячейку первой строки. Третья ячейка второй строки пересекает две строки, то есть растянулась по вертикали, заняв и третью ячейку третьей строки.</p>
30
<p>Вторая ячейка первой строки пересекает два столбца. То есть она растянулась по горизонтали и приняла в себя третью ячейку первой строки. Третья ячейка второй строки пересекает две строки, то есть растянулась по вертикали, заняв и третью ячейку третьей строки.</p>
31
<p>Поэтому третьи ячейки для первой и третьей строк задавать не нужно. Они уже поглощены другими. Теперь к коду:</p>
31
<p>Поэтому третьи ячейки для первой и третьей строк задавать не нужно. Они уже поглощены другими. Теперь к коду:</p>
32
<table> <tr> <td>1</td> <td colspan="2">2</td> </tr> <tr> <td>1</td> <td>2</td> <td rowspan="2">3</td> </tr> <tr> <td>1</td> <td>2</td> </tr> </table><p>Ещё один пример:</p>
32
<table> <tr> <td>1</td> <td colspan="2">2</td> </tr> <tr> <td>1</td> <td>2</td> <td rowspan="2">3</td> </tr> <tr> <td>1</td> <td>2</td> </tr> </table><p>Ещё один пример:</p>
33
<p>Как такое сверстать:</p>
33
<p>Как такое сверстать:</p>
34
<table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td colspan="2" rowspan="2">2</td> </tr> <tr> <td>1</td> </tr> </table><p>Здесь вторая ячейка второй строки занимает два столбца и две строки. Обратите внимание, что во второй строке нет третьей ячейки и в третьей строке нет второй и третьей ячеек. Теперь места этих ячеек занимает вторая ячейка второй строки.</p>
34
<table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td colspan="2" rowspan="2">2</td> </tr> <tr> <td>1</td> </tr> </table><p>Здесь вторая ячейка второй строки занимает два столбца и две строки. Обратите внимание, что во второй строке нет третьей ячейки и в третьей строке нет второй и третьей ячеек. Теперь места этих ячеек занимает вторая ячейка второй строки.</p>
35
<p>Этот тег следует включать в любую таблицу. Где бы вы его ни разместили, его содержимое будет выведено перед таблицей. Изменить это можно с помощью свойства caption-side (значение top - для вывода до таблицы, и bottom - после).</p>
35
<p>Этот тег следует включать в любую таблицу. Где бы вы его ни разместили, его содержимое будет выведено перед таблицей. Изменить это можно с помощью свойства caption-side (значение top - для вывода до таблицы, и bottom - после).</p>
36
<p>Для единообразия и доступности тег заголовка размещают в самом начале - сразу после тега <table>.</p>
36
<p>Для единообразия и доступности тег заголовка размещают в самом начале - сразу после тега <table>.</p>
37
<p>Тег <caption> по умолчанию выравнивает своё содержимое по центру. Чтобы установить выравнивание по левому или правому краю, достаточно поменять значение свойства text-align.</p>
37
<p>Тег <caption> по умолчанию выравнивает своё содержимое по центру. Чтобы установить выравнивание по левому или правому краю, достаточно поменять значение свойства text-align.</p>
38
<p><strong>Зачем нужен заголовок?</strong></p>
38
<p><strong>Зачем нужен заголовок?</strong></p>
39
<ul><li>Чтобы пользователям было проще ориентироваться на странице - например, когда таблиц много.</li>
39
<ul><li>Чтобы пользователям было проще ориентироваться на странице - например, когда таблиц много.</li>
40
<li>Тег <caption> помогает людям с ограниченными возможностями. По заголовку они получают краткое представление о содержимом таблицы и решают, полезна ли она для них и стоит ли читать её целиком.</li>
40
<li>Тег <caption> помогает людям с ограниченными возможностями. По заголовку они получают краткое представление о содержимом таблицы и решают, полезна ли она для них и стоит ли читать её целиком.</li>
41
<li>Этот тег влияет на оптимизацию, его любят поисковики.</li>
41
<li>Этот тег влияет на оптимизацию, его любят поисковики.</li>
42
</ul><p><strong>Примечание.</strong>Если дизайнер не предусмотрел заголовок таблицы, то хороший разработчик придумает его, добавит в разметку и скроет через CSS. Это повысит доступность контента.</p>
42
</ul><p><strong>Примечание.</strong>Если дизайнер не предусмотрел заголовок таблицы, то хороший разработчик придумает его, добавит в разметку и скроет через CSS. Это повысит доступность контента.</p>
43
<p>Даже скрытый заголовок всё равно доступен при навигации по странице с помощью клавиатуры. И речевой браузер для людей с ограниченными возможностями тоже понимает тег <caption> - читая текст в этом теге, он меняет интонацию, темп речи, повышает громкость голоса и тому подобное.</p>
43
<p>Даже скрытый заголовок всё равно доступен при навигации по странице с помощью клавиатуры. И речевой браузер для людей с ограниченными возможностями тоже понимает тег <caption> - читая текст в этом теге, он меняет интонацию, темп речи, повышает громкость голоса и тому подобное.</p>
44
<p>Структура таблиц очень похожа на структуру HTML-страницы. Только для страницы мы используем теги <header>, <main> и <footer>, а для таблицы - <thead>, <tbody> и <tfoot>.</p>
44
<p>Структура таблиц очень похожа на структуру HTML-страницы. Только для страницы мы используем теги <header>, <main> и <footer>, а для таблицы - <thead>, <tbody> и <tfoot>.</p>
45
<p>Согласно<a>стандарту HTML5</a>, в таблице может быть только по одной секции thead и tfoot, а вот tbody - несколько.</p>
45
<p>Согласно<a>стандарту HTML5</a>, в таблице может быть только по одной секции thead и tfoot, а вот tbody - несколько.</p>
46
<p>Эти элементы полезны не только для доступности, но и для стилизации (как логичные точки добавления CSS к таблице).</p>
46
<p>Эти элементы полезны не только для доступности, но и для стилизации (как логичные точки добавления CSS к таблице).</p>
47
<p>Этим тегом задают заголовочную секцию таблицы. Чаще всего речь идёт о первой строке - содержащей заголовки столбцов.</p>
47
<p>Этим тегом задают заголовочную секцию таблицы. Чаще всего речь идёт о первой строке - содержащей заголовки столбцов.</p>
48
<p>Браузер и поисковики считают эту часть заголовочным колонтитулом таблицы. Например, при печати колонтитулы таблицы будут на каждой напечатанной странице - и благодаря такой шапке вы не забудете, что значат данные каждого столбца.</p>
48
<p>Браузер и поисковики считают эту часть заголовочным колонтитулом таблицы. Например, при печати колонтитулы таблицы будут на каждой напечатанной странице - и благодаря такой шапке вы не забудете, что значат данные каждого столбца.</p>
49
<p>В <thead> для ячеек используют тег <th>. Контент в ячейке th браузер выравнивает по центру, а текст к тому же отображает жирным шрифтом.</p>
49
<p>В <thead> для ячеек используют тег <th>. Контент в ячейке th браузер выравнивает по центру, а текст к тому же отображает жирным шрифтом.</p>
50
<p><strong>Например:</strong></p>
50
<p><strong>Например:</strong></p>
51
<p>Сaption</p>
51
<p>Сaption</p>
52
<table> <caption>Caption</caption> <thead> <tr> <th>th</th> <th colspan="4">th</th> </tr> </thead> <tbody> <tr> <td>td</td> <td>td</td> <td>td</td> <td>td</td> <td>td</td> </tr> <tr> <td>td</td> <td>td</td> <td>td</td> <td>td</td> <td>td</td> </tr> </tbody> </table><p>Из примера видно, что первая строка объединяет две ячейки <th>. Первая ячейка первой строки - это заголовок для других ячеек первого столбца, а вторая ячейка первой строки - это заголовок четырёх оставшихся столбцов.</p>
52
<table> <caption>Caption</caption> <thead> <tr> <th>th</th> <th colspan="4">th</th> </tr> </thead> <tbody> <tr> <td>td</td> <td>td</td> <td>td</td> <td>td</td> <td>td</td> </tr> <tr> <td>td</td> <td>td</td> <td>td</td> <td>td</td> <td>td</td> </tr> </tbody> </table><p>Из примера видно, что первая строка объединяет две ячейки <th>. Первая ячейка первой строки - это заголовок для других ячеек первого столбца, а вторая ячейка первой строки - это заголовок четырёх оставшихся столбцов.</p>
53
<p>Тег <th> задаёт особые ячейки, с которых начинаются строки или столбцы. В такой ячейке обычно хранится атрибут для всех данных строки или столбца.</p>
53
<p>Тег <th> задаёт особые ячейки, с которых начинаются строки или столбцы. В такой ячейке обычно хранится атрибут для всех данных строки или столбца.</p>
54
<p>Как мы и говорили выше, к содержимому таких ячеек применяется определённый стиль: по умолчанию это выделение жирным шрифтом и выравнивание по центру ячейки.</p>
54
<p>Как мы и говорили выше, к содержимому таких ячеек применяется определённый стиль: по умолчанию это выделение жирным шрифтом и выравнивание по центру ячейки.</p>
55
<p>Благодаря заголовочным ячейкам таблица выглядит лучше, а искать данные в ней становится проще.</p>
55
<p>Благодаря заголовочным ячейкам таблица выглядит лучше, а искать данные в ней становится проще.</p>
56
<p><strong>Важно.</strong>Не применяйте <th> для визуального форматирования - только для выделения ячейки-заголовка. Этот принцип касается всех элементов разметки, которые обладают семантикой.</p>
56
<p><strong>Важно.</strong>Не применяйте <th> для визуального форматирования - только для выделения ячейки-заголовка. Этот принцип касается всех элементов разметки, которые обладают семантикой.</p>
57
<p>Тег <th> даёт ещё одно преимущество: вместе с атрибутом scope он связывает каждый заголовок со всеми данными строки или столбца. То есть добавляет к интуитивной, визуально считываемой связи такую, которую понимают и программы.</p>
57
<p>Тег <th> даёт ещё одно преимущество: вместе с атрибутом scope он связывает каждый заголовок со всеми данными строки или столбца. То есть добавляет к интуитивной, визуально считываемой связи такую, которую понимают и программы.</p>
58
<p>К тегу <th> и атрибуту scope мы вернёмся ближе к концу статьи, где подробнее поговорим о доступности таблиц для пользователей с ограниченными возможностями.</p>
58
<p>К тегу <th> и атрибуту scope мы вернёмся ближе к концу статьи, где подробнее поговорим о доступности таблиц для пользователей с ограниченными возможностями.</p>
59
<p>Секция <tbody> содержит основную часть информации и группирует главные части таблицы. То есть можно использовать <tbody> сколько угодно раз, чтобы разбивать основной контент таблицы на части, данные которых связаны общей логикой.</p>
59
<p>Секция <tbody> содержит основную часть информации и группирует главные части таблицы. То есть можно использовать <tbody> сколько угодно раз, чтобы разбивать основной контент таблицы на части, данные которых связаны общей логикой.</p>
60
<p>Тег <tbody> семантически важен: браузер, поисковые роботы и помощники для людей с ограниченными возможностями благодаря ему понимают, где находится основное содержимое таблицы.</p>
60
<p>Тег <tbody> семантически важен: браузер, поисковые роботы и помощники для людей с ограниченными возможностями благодаря ему понимают, где находится основное содержимое таблицы.</p>
61
<p>Тело таблицы располагается после заголовка <caption> и шапки <thead>.</p>
61
<p>Тело таблицы располагается после заголовка <caption> и шапки <thead>.</p>
62
<p><strong>Пример:</strong></p>
62
<p><strong>Пример:</strong></p>
63
<strong>Месяц</strong>Дни неделиОплата(тыс. р.)ЯнварьПонедельник50Вторник40Среда35Четверг40Пятница15Суббота60Воскресенье30ФевральПонедельник20Вторник25Среда15Четверг70Пятница77Суббота63Воскресенье30<p>Здесь нет заголовка <caption>, поэтому нужно его придумать и скрыть с помощью CSS (для доступности веб-содержимого).</p>
63
<strong>Месяц</strong>Дни неделиОплата(тыс. р.)ЯнварьПонедельник50Вторник40Среда35Четверг40Пятница15Суббота60Воскресенье30ФевральПонедельник20Вторник25Среда15Четверг70Пятница77Суббота63Воскресенье30<p>Здесь нет заголовка <caption>, поэтому нужно его придумать и скрыть с помощью CSS (для доступности веб-содержимого).</p>
64
<p>Данные основной части таблицы надо сгруппировать по смыслу. У нас сначала идёт январь, затем февраль. Значит, для данных каждого месяца логично использовать свой <tbody>:</p>
64
<p>Данные основной части таблицы надо сгруппировать по смыслу. У нас сначала идёт январь, затем февраль. Значит, для данных каждого месяца логично использовать свой <tbody>:</p>
65
<ul><li>в первом <tbody> будут январские строки;</li>
65
<ul><li>в первом <tbody> будут январские строки;</li>
66
<li>во втором <tbody> - февральские.</li>
66
<li>во втором <tbody> - февральские.</li>
67
</ul><p>Секция <tfoot> используется для группировки содержимого нижней части таблицы.</p>
67
</ul><p>Секция <tfoot> используется для группировки содержимого нижней части таблицы.</p>
68
<p>Семантически это итог таблицы (например, результат подсчёта сумм по столбцам).</p>
68
<p>Семантически это итог таблицы (например, результат подсчёта сумм по столбцам).</p>
69
<p>А ещё это нижний колонтитул таблицы, браузер выводит его после <tbody>, а при печати таблицы содержимое <tfoot> может быть как на каждой напечатанной странице, так и только на последней (это зависит от браузера).</p>
69
<p>А ещё это нижний колонтитул таблицы, браузер выводит его после <tbody>, а при печати таблицы содержимое <tfoot> может быть как на каждой напечатанной странице, так и только на последней (это зависит от браузера).</p>
70
<p><strong>Важно.</strong>Чтобы предотвратить проблемы с доступностью (клавиатурная навигация и специальные возможности), размещать <tfoot> следует после <tbody>.</p>
70
<p><strong>Важно.</strong>Чтобы предотвратить проблемы с доступностью (клавиатурная навигация и специальные возможности), размещать <tfoot> следует после <tbody>.</p>
71
<p>Для ячеек в секции <tfoot> следует использовать тег <td>.</p>
71
<p>Для ячеек в секции <tfoot> следует использовать тег <td>.</p>
72
<p><strong>Пример:</strong></p>
72
<p><strong>Пример:</strong></p>
73
<p><strong>Таблица чисел</strong></p>
73
<p><strong>Таблица чисел</strong></p>
74
НечётноеЧётное123456Вы узнали, что такое чётные и нечётные числа<table> <caption>Таблицa чисел</caption> <thead> <tr> <th>Нечётное</th> <th>Чётное</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </tbody> <tfoot> <tr> <td colspan="2"> Вы узнали, что такое чётные и нечётные числа </td> </tr> </tfoot> </table><p>Последняя строка нашего примера - это по смыслу итог таблицы. Поэтому её вполне уместно обернуть тегом <tfoot>, превратив в нижний колонтитул.</p>
74
НечётноеЧётное123456Вы узнали, что такое чётные и нечётные числа<table> <caption>Таблицa чисел</caption> <thead> <tr> <th>Нечётное</th> <th>Чётное</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </tbody> <tfoot> <tr> <td colspan="2"> Вы узнали, что такое чётные и нечётные числа </td> </tr> </tfoot> </table><p>Последняя строка нашего примера - это по смыслу итог таблицы. Поэтому её вполне уместно обернуть тегом <tfoot>, превратив в нижний колонтитул.</p>
75
<p>Теги <thead> и <tfoot> нужны не всегда. Бывают таблицы без шапки и подвала.</p>
75
<p>Теги <thead> и <tfoot> нужны не всегда. Бывают таблицы без шапки и подвала.</p>
76
<p>Если нет смысла группировать основную часть таблицы, то можно обойтись и без тега <tbody>, но мы рекомендуем не делать так. Тег даёт больше контроля над структурой таблицы и стилизацией, а также приучает действовать последовательно.</p>
76
<p>Если нет смысла группировать основную часть таблицы, то можно обойтись и без тега <tbody>, но мы рекомендуем не делать так. Тег даёт больше контроля над структурой таблицы и стилизацией, а также приучает действовать последовательно.</p>
77
<p>К тому же браузер всё равно подставит этот тег сам, а всегда полагаться на браузеры - значит оставить место для возможных ошибок.</p>
77
<p>К тому же браузер всё равно подставит этот тег сам, а всегда полагаться на браузеры - значит оставить место для возможных ошибок.</p>
78
<p><strong>Пример:</strong></p>
78
<p><strong>Пример:</strong></p>
79
1Мавзалеев И. В.10.09.19922Киреева А. Ю.02.05.19963Корнеев И. Ю.09.10.19904Тресков В. А.25.03.19935Ибрагимов А. Е.15.10.19946Борисенко Д. С.10.10.1991<p>В таблице выше шесть строк, каждая из которых содержит три ячейки. Здесь нет важных для смысла признаков, по которым можно сгруппировать содержимое таблицы. Поэтому будет достаточно тега <caption> (придумаем его и скроем) и тега <tbody>, а вот теги <thead> и <tfoot> можно опустить.</p>
79
1Мавзалеев И. В.10.09.19922Киреева А. Ю.02.05.19963Корнеев И. Ю.09.10.19904Тресков В. А.25.03.19935Ибрагимов А. Е.15.10.19946Борисенко Д. С.10.10.1991<p>В таблице выше шесть строк, каждая из которых содержит три ячейки. Здесь нет важных для смысла признаков, по которым можно сгруппировать содержимое таблицы. Поэтому будет достаточно тега <caption> (придумаем его и скроем) и тега <tbody>, а вот теги <thead> и <tfoot> можно опустить.</p>
80
<p>C помощью тега <col> удобно стилизовать столбцы таблицы через CSS (не приходится писать классы для каждой ячейки в разных строках). Это крутая фишка для любого разработчика.</p>
80
<p>C помощью тега <col> удобно стилизовать столбцы таблицы через CSS (не приходится писать классы для каждой ячейки в разных строках). Это крутая фишка для любого разработчика.</p>
81
<p><strong>Как это работает:</strong></p>
81
<p><strong>Как это работает:</strong></p>
82
<p>Caption</p>
82
<p>Caption</p>
83
<table class="table"> <caption>Caption</caption> <col class="col-first"> <col> <col> <thead> <tr> <th>th</th> <th colspan="2">th</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </tbody> </table><p>У нас три ячейки и, следовательно, три столбца. Поэтому мы используем три тега <col>.</p>
83
<table class="table"> <caption>Caption</caption> <col class="col-first"> <col> <col> <thead> <tr> <th>th</th> <th colspan="2">th</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </tbody> </table><p>У нас три ячейки и, следовательно, три столбца. Поэтому мы используем три тега <col>.</p>
84
<p>Для группировки тегов <col> применяют специальный тег <colgroup>:</p>
84
<p>Для группировки тегов <col> применяют специальный тег <colgroup>:</p>
85
<colgroup> <col class="col-first"> <col> <col> </colgroup><p><colgroup> позволяет задать стиль сразу для группы столбцов, а тег <col> внутри <colgroup> - переопределить его для отдельных столбцов в группе.</p>
85
<colgroup> <col class="col-first"> <col> <col> </colgroup><p><colgroup> позволяет задать стиль сразу для группы столбцов, а тег <col> внутри <colgroup> - переопределить его для отдельных столбцов в группе.</p>
86
<p>Располагать теги <colgroup>, <col> нужно перед тегами <thead>, <tbody>, <tfoot>, а если у таблицы есть тег <caption>, то после него.</p>
86
<p>Располагать теги <colgroup>, <col> нужно перед тегами <thead>, <tbody>, <tfoot>, а если у таблицы есть тег <caption>, то после него.</p>
87
<p>У тега <col> есть атрибут span, который распространяет стиль на несколько столбцов.</p>
87
<p>У тега <col> есть атрибут span, который распространяет стиль на несколько столбцов.</p>
88
<p><strong>Например:</strong></p>
88
<p><strong>Например:</strong></p>
89
<p>Caption</p>
89
<p>Caption</p>
90
<table class="table"> <caption>Caption</caption> <colgroup> <col> <col span="2" class="col-second"> <col> </colgroup> <thead> <tr> <th>th</th> <th>th</th> <th>th</th> <th>th</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </tbody> </table><p>Первый тег <col> - это первый столбец, а второй тег <col> - второй, но из-за атрибута span, в котором мы указали значение "2", его стиль распространяется и на третий.</p>
90
<table class="table"> <caption>Caption</caption> <colgroup> <col> <col span="2" class="col-second"> <col> </colgroup> <thead> <tr> <th>th</th> <th>th</th> <th>th</th> <th>th</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </tbody> </table><p>Первый тег <col> - это первый столбец, а второй тег <col> - второй, но из-за атрибута span, в котором мы указали значение "2", его стиль распространяется и на третий.</p>
91
<p>Это удобно, когда нужно одинаково стилизовать несколько столбцов. Например, чтобы не создавать много тегов <col> с одними и теми же классами, мы используем атрибут span. Этот атрибут работает и для тега <colgroup>.</p>
91
<p>Это удобно, когда нужно одинаково стилизовать несколько столбцов. Например, чтобы не создавать много тегов <col> с одними и теми же классами, мы используем атрибут span. Этот атрибут работает и для тега <colgroup>.</p>
92
<p>Когда таблица хорошо структурирована, достаточно беглого взгляда, чтобы понять, какие где данные: мигом возникают визуальные ассоциации между основной информацией в таблице и заголовками её колонок и/или строк.</p>
92
<p>Когда таблица хорошо структурирована, достаточно беглого взгляда, чтобы понять, какие где данные: мигом возникают визуальные ассоциации между основной информацией в таблице и заголовками её колонок и/или строк.</p>
93
<p>Но что, если наши пользователи не могут провести такую визуальную параллель. Например, они слабовидящие. Как им прочитать сложную таблицу?</p>
93
<p>Но что, если наши пользователи не могут провести такую визуальную параллель. Например, они слабовидящие. Как им прочитать сложную таблицу?</p>
94
<p>Люди с ослабленным зрением часто применяют скринридеры - программы, которые читают для них веб-страницы. С обычным текстом скринридер справляется хорошо, но интерпретировать сложную таблицу для него проблема.</p>
94
<p>Люди с ослабленным зрением часто применяют скринридеры - программы, которые читают для них веб-страницы. С обычным текстом скринридер справляется хорошо, но интерпретировать сложную таблицу для него проблема.</p>
95
<p>Поэтому разработчики должны позаботиться об этом и дополнить визуальные ассоциации в таблице программными, которые скринридер сможет понять.</p>
95
<p>Поэтому разработчики должны позаботиться об этом и дополнить визуальные ассоциации в таблице программными, которые скринридер сможет понять.</p>
96
<p>Чаще всего это делают с помощью тега <th> и атрибута scope, который сообщает скринридеру, какие ячейки точно являются заголовками - например, заголовок строки, в которой программа находится, или же заголовок столбца.</p>
96
<p>Чаще всего это делают с помощью тега <th> и атрибута scope, который сообщает скринридеру, какие ячейки точно являются заголовками - например, заголовок строки, в которой программа находится, или же заголовок столбца.</p>
97
<p>Благодаря им все пользователи могут интерпретировать таблицу так же, как и зрячие люди.</p>
97
<p>Благодаря им все пользователи могут интерпретировать таблицу так же, как и зрячие люди.</p>
98
<p><strong>Пример</strong></p>
98
<p><strong>Пример</strong></p>
99
<p>Вернёмся к нашей таблице чётности чисел:</p>
99
<p>Вернёмся к нашей таблице чётности чисел:</p>
100
<p>Таблица чисел</p>
100
<p>Таблица чисел</p>
101
НечётноеЧётное123456Вы узнали, что такое чётные и нечётные числа<p>Чтобы однозначно указать заголовки столбцов, делаем вот так:</p>
101
НечётноеЧётное123456Вы узнали, что такое чётные и нечётные числа<p>Чтобы однозначно указать заголовки столбцов, делаем вот так:</p>
102
<table> <caption>Таблицa чисел</caption> <thead> <tr> <th scope="col">Нечётное</th> <th scope="col">Чётное</th> </tr> </thead> <tbody> <!--HTML-код--> </tbody> <tfoot> <!--HTML-код--> </tfoot> </table><p>И у каждой строки тоже можно определить заголовок (если в таблице есть не только заголовки столбцов). Слегка изменим для этого наш пример:</p>
102
<table> <caption>Таблицa чисел</caption> <thead> <tr> <th scope="col">Нечётное</th> <th scope="col">Чётное</th> </tr> </thead> <tbody> <!--HTML-код--> </tbody> <tfoot> <!--HTML-код--> </tfoot> </table><p>И у каждой строки тоже можно определить заголовок (если в таблице есть не только заголовки столбцов). Слегка изменим для этого наш пример:</p>
103
<p>Таблица чисел</p>
103
<p>Таблица чисел</p>
104
Пара №НечётноеЧётное<strong>1</strong>12<strong>2</strong>34<strong>3</strong>56Вы узнали, что такое чётные и нечётные числа<p>И снова к HTML:</p>
104
Пара №НечётноеЧётное<strong>1</strong>12<strong>2</strong>34<strong>3</strong>56Вы узнали, что такое чётные и нечётные числа<p>И снова к HTML:</p>
105
<table> <caption>Таблицa чисел</caption> <thead> <tr> <th scope="col">Пара №</th> <th scope="col">Нечётное</th> <th scope="col">Чётное</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>1</td> <td>2</td> </tr> <tr> <th scope="row">2</th> <td>3</td> <td>4</td> </tr> <tr> <th scope="row">3</th> <td>5</td> <td>6</td> </tr> </tbody> <tfoot> <tr> <td colspan="3"> Вы узнали, что такое чётные и нечётные числа </td> </tr> </tfoot> </table><p>Скринридер распознаёт такую семантическую разметку и позволяет пользователям прочесть весь столбец или строку целиком.</p>
105
<table> <caption>Таблицa чисел</caption> <thead> <tr> <th scope="col">Пара №</th> <th scope="col">Нечётное</th> <th scope="col">Чётное</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>1</td> <td>2</td> </tr> <tr> <th scope="row">2</th> <td>3</td> <td>4</td> </tr> <tr> <th scope="row">3</th> <td>5</td> <td>6</td> </tr> </tbody> <tfoot> <tr> <td colspan="3"> Вы узнали, что такое чётные и нечётные числа </td> </tr> </tfoot> </table><p>Скринридер распознаёт такую семантическую разметку и позволяет пользователям прочесть весь столбец или строку целиком.</p>
106
<p>У атрибута scope есть ещё два значения - colgroup и rowgroup. Они используются для таблиц с двумя и более уровнями заголовков (заголовки, которые группируют подзаголовки).</p>
106
<p>У атрибута scope есть ещё два значения - colgroup и rowgroup. Они используются для таблиц с двумя и более уровнями заголовков (заголовки, которые группируют подзаголовки).</p>
107
<p>Так заголовок верхнего уровня получает scope="colgroup", а у его подзаголовков scope="col", и аналогично для строк.</p>
107
<p>Так заголовок верхнего уровня получает scope="colgroup", а у его подзаголовков scope="col", и аналогично для строк.</p>
108
<ul><li>Таблица состоит из строк <tr> и ячеек (<td> и <th>). Дочерними элементами строки <tr> могут быть только ячейки, но не наоборот.</li>
108
<ul><li>Таблица состоит из строк <tr> и ячеек (<td> и <th>). Дочерними элементами строки <tr> могут быть только ячейки, но не наоборот.</li>
109
<li>Таблице нужен заголовок <caption>. Он увеличивает доступность веб-содержимого. Если дизайнер не учёл этого, верстальщик сам придумывает заголовок и скрывает его с помощью CSS.</li>
109
<li>Таблице нужен заголовок <caption>. Он увеличивает доступность веб-содержимого. Если дизайнер не учёл этого, верстальщик сам придумывает заголовок и скрывает его с помощью CSS.</li>
110
<li>За логическое структурирование таблицы, помимо заголовка <caption>, отвечают теги <thead>, <tbody> и <tfoot>. Также они полезны при стилизации секций таблицы.</li>
110
<li>За логическое структурирование таблицы, помимо заголовка <caption>, отвечают теги <thead>, <tbody> и <tfoot>. Также они полезны при стилизации секций таблицы.</li>
111
<li>Внутри <thead> ячееки задают тегом <th> (он семантический), внутри <tfoot> - <td>, а внутри <tbody> допустимы оба.</li>
111
<li>Внутри <thead> ячееки задают тегом <th> (он семантический), внутри <tfoot> - <td>, а внутри <tbody> допустимы оба.</li>
112
<li>Для стилизации столбцов в таблице применяют тег <col>.</li>
112
<li>Для стилизации столбцов в таблице применяют тег <col>.</li>
113
</ul><p><strong>Заботьтесь обо всех пользователях - верстайте таблицы семантически верно.</strong></p>
113
</ul><p><strong>Заботьтесь обо всех пользователях - верстайте таблицы семантически верно.</strong></p>
114
<a><b>Бесплатный курс по Python ➞</b>Мини-курс для новичков и для опытных кодеров. 4 крутых проекта в портфолио, живое общение со спикером. Кликните и узнайте, чему можно научиться на курсе. Смотреть программу</a>
114
<a><b>Бесплатный курс по Python ➞</b>Мини-курс для новичков и для опытных кодеров. 4 крутых проекта в портфолио, живое общение со спикером. Кликните и узнайте, чему можно научиться на курсе. Смотреть программу</a>