Атрибут headers тега <th> — зв'язок заголовків таблиці
Атрибут headers дозволяє зв'язати елементи таблиці з заголовками. Цей атрибут призначений для підвищення доступності таблиці користувачам мовних браузерів, в звичайних браузерах результат застосування атрибута headers не помітний.
Для зв'язування осередків між собою, осередку в <th> пишеться атрибут id, а в іншому осередку - атрибут headers зі значенням, що збігається зі значенням id.
Загальний опис
автор: NagarD
Синтаксис
<th headers="header_id">Атрибут headers може отримувати єдине значення:
-
header_id -
header_id
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута headers теґа <th>
HTML
<p>Приклад використання атрибута "headers"</p>
<table cellspacing="0" cellpadding="4" border="1">
<tr>
<td id="name">Ім'я</td>
<td id="surname">Прізвище</td>
<td id="telephone">Телефон</td>
<td id="address">Адреса</td>
<td id="number">Номер квартири</td>
</tr>
<tr>
<th headers="name">Олег</th>
<th headers="surname">Бойко</th>
<th headers="telephone">097-94-32-95</th>
<th headers="address">Вулиця Руська, 13</th>
<th headers="number">27</th>
</tr>
</table>CSS
table,th,td{
border: 1px solid grey;
text-align:center;
}
td{
padding:10px;
}
th,td{
padding:10px;
}
caption{
font-size:20px;
}Таблиця з двоповерховою шапкою: верхній ряд — роки, нижній — квартали, і кожне число підпорядковане двом заголовкам одночасно. Оскільки сам headers не видно, зв'язок показано селектором td[headers~="…"]: наведіть курсор на таблицю — і кожна група підсвітиться саме тим кольором, який відповідає її заголовку.
HTML
<table>
<caption>Продажі за кварталами</caption>
<tr>
<th id="h-tovar" rowspan="2" scope="col">Товар</th>
<th id="h-2025" colspan="2" scope="colgroup">2025</th>
<th id="h-2026" colspan="2" scope="colgroup">2026</th>
</tr>
<tr>
<th id="h-25q1" headers="h-2025" scope="col">I кв.</th>
<th id="h-25q2" headers="h-2025" scope="col">II кв.</th>
<th id="h-26q1" headers="h-2026" scope="col">I кв.</th>
<th id="h-26q2" headers="h-2026" scope="col">II кв.</th>
</tr>
<tr>
<th id="h-klyuch" headers="h-tovar" scope="row">Гайковий ключ</th>
<td headers="h-klyuch h-2025 h-25q1">120</td>
<td headers="h-klyuch h-2025 h-25q2">98</td>
<td headers="h-klyuch h-2026 h-26q1">140</td>
<td headers="h-klyuch h-2026 h-26q2">155</td>
</tr>
<tr>
<th id="h-molotok" headers="h-tovar" scope="row">Молоток</th>
<td headers="h-molotok h-2025 h-25q1">64</td>
<td headers="h-molotok h-2025 h-25q2">71</td>
<td headers="h-molotok h-2026 h-26q1">80</td>
<td headers="h-molotok h-2026 h-26q2">76</td>
</tr>
</table>
<p class="legend">
<span class="y25">td[headers~="h-2025"]</span>
<span class="y26">td[headers~="h-2026"]</span>
<span class="row">td[headers~="h-molotok"]</span>
</p>
<p class="foot">Читалка екрана озвучить праву нижню комірку як
«Молоток, 2026, II кв., 76». На екрані ж сам атрибут не дає нічого — уся
підсвітка тут домальована стилями, самим лише збігом за списком у headers.</p>CSS
table {
border-collapse: collapse;
margin-bottom: 12px;
}
caption {
margin-bottom: 6px;
font-weight: 600;
text-align: left;
}
td,
th {
padding: 6px 12px;
border: 1px solid #b9c6d8;
text-align: center;
transition: background-color .15s;
}
th[headers] {
font-weight: 600;
}
td[headers~="h-2025"] {
background-color: #e6f0fb;
}
td[headers~="h-2026"] {
background-color: #fdf3e0;
}
td[headers~="h-molotok"] {
outline: 2px solid #72b043;
outline-offset: -2px;
}
.legend {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin: 0 0 12px;
font-size: .9em;
}
.legend span {
padding: 3px 8px;
border: 1px solid #b9c6d8;
}
.legend .y25 {
background-color: #e6f0fb;
}
.legend .y26 {
background-color: #fdf3e0;
}
.legend .row {
outline: 2px solid #72b043;
outline-offset: -2px;
}
.foot {
max-width: 520px;
color: #5a6472;
font-size: .9em;
}Коментарі
Коментарів ще немає — будьте першим!