Атрибут headers тега <td> — комірка та її заголовки
Атрибут headers (HTML тега <td>) вказує id однієї або декількох заголовків осередків (HTML тег <th>), пов'язаних
з даним осередком даних. Застосування атрибута не відображається в браузері, але може бути використано, наприклад, для читання з екрану або в роботі скриптів.
Цей атрибут призначений для підвищення доступності таблиці користувачам мовних браузерів, в звичайних браузерах результат застосування атрибута headers не помітний.
Загальний опис
автор: NagarD
Синтаксис
<td headers="header_id">Атрибут headers може отримувати єдине значення:
-
header_id -
Вказує
автор: с3сidоднієї або декількох заголовків осередків (HTML тег<th>), пов'язаних з даним осередком даних. У разі якщо вказується кількаid, то вони записуються як список рядків, розділених пропуском.
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута headers теґа <td>
HTML
<p>Приклад використання атрибута "header"</p>
<table border = "1">
<tr>
<th id = "abiturient" colspan = "3">П.І.Б</th>
<th id = "kurs" >Курс</th>
<th id = "phone" >Телефон</th>
</tr>
<tr>
<td headers = "abiturient">Бойко</td>
<td headers = "abiturient">Іван</td>
<td headers = "abiturient">Ігорович</td>
<td headers = "kurs">1</td>
<td headers = "phone">097 96 42 123</td>
</tr>
<tr>
<td headers = "abiturient">Степаненко</td>
<td headers = "abiturient">Олег</td>
<td headers = "abiturient">Васильвич</td>
<td headers = "kurs">2</td>
<td headers = "phone">097 84 00 423</td>
</tr>
</table>CSS
table,th,td{
border: 1px solid grey;
text-align:center;
}
td{
padding:10px;
}
th,td{
padding:10px;
}
caption{
font-size:20px;
}Складна таблиця із заголовками зверху й збоку: CSS робить невидимий зв'язок видимим — дописує кожній комірці її headers і підсвічує ту, де в ідентифікаторі одруківка. Нижче — проста таблиця, якій вистачає самого scope.
HTML
<table class="complex">
<caption>Заголовки зверху І збоку — тут headers справді потрібен</caption>
<tr>
<td class="corner"></td>
<th id="y2024" scope="col">2024</th>
<th id="y2025" scope="col">2025</th>
</tr>
<tr>
<th id="kyiv" scope="row">Київ</th>
<td headers="kyiv y2024">120</td>
<td headers="kyiv y2025">143</td>
</tr>
<tr>
<th id="lviv" scope="row">Львів</th>
<td headers="lviv y2024">64</td>
<td headers="lviv y2025">71</td>
</tr>
<tr>
<th id="odesa" scope="row">Одеса</th>
<td headers="odesa y2024">58</td>
<td headers="odesa r2025">62</td>
</tr>
</table>
<p class="note">В останній комірці написано r2025 замість y2025. Браузер не
скаржиться, таблиця виглядає бездоганно — зв'язок просто зник.</p>
<table class="simple">
<caption>Проста таблиця: headers зайвий, вистачає scope</caption>
<tr><th scope="col">Місто</th><th scope="col">2025</th></tr>
<tr><th scope="row">Київ</th><td>143</td></tr>
<tr><th scope="row">Львів</th><td>71</td></tr>
</table>CSS
table {
margin-bottom: 16px;
border-collapse: collapse;
}
caption {
margin-bottom: 6px;
font-weight: 600;
text-align: left;
}
td,
th {
padding: 6px 10px;
border: 1px solid #b9c6d8;
text-align: left;
}
.corner {
border: 0;
}
td[headers]::after {
content: "headers=" attr(headers);
display: block;
margin-top: 2px;
color: #5a6472;
font-size: .75em;
}
td[headers="odesa r2025"] {
background: #fff4f4;
outline: 2px dashed #d64545;
}
td[headers="odesa r2025"]::after {
color: #c0392b;
}
.note {
max-width: 520px;
margin: 0 0 20px;
color: #c0392b;
font-size: .9em;
}Коментарі
Коментарів ще немає — будьте першим!