Атрибут scope тега <td> — зв'язок комірки із заголовком
Атрибут scope - визначає спосіб зв'язування комірок із заголовками та комірок з даними.
Атрибут scope ідентифікує заголовки стовпчиків та рядків або групи стовпчиків чи рядків.
За своєю дією нагадує атрибут headers, але використовується для простих таблиць. Атрибут призначений для екранних рідерів на подобі мовних браузерів, в звичайних браузерах результат додавання scope ніяк не помітний.
Загальний опис
автор: NagarD
Синтаксис
<td scope="col|row|colgroup|rowgroup">Атрибут scope може отримувати 4 значень:
-
col -
Вказує, що комірка це заголовок для стовпчика.
автор: с3с -
row -
Вказує, що комірка це заголовок для рядка.
автор: с3с -
colgroup -
Вказує, що комірка це заголовок для групи стовпчиків.
автор: с3с -
rowgroup -
Вказує, що комірка це заголовок для групи рядків.
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Дві однакові на вигляд таблиці: у першій scope стоїть на заголовках <th>, у другій — на звичайних комірках <td>. Різниці на екрані немає жодної, тому значення атрибута тут дописано правилом content: attr(scope), а невалідні комірки підсвічено червоним.
HTML
<table class="ok">
<caption>Правильно: scope на th</caption>
<tr>
<td></td>
<th scope="col">2001</th>
<th scope="col">2021</th>
</tr>
<tr>
<th scope="row">Київ</th>
<td>2 611 000</td>
<td>2 952 000</td>
</tr>
<tr>
<th scope="row">Львів</th>
<td>725 000</td>
<td>717 000</td>
</tr>
</table>
<table class="bad">
<caption>Невалідно, але «працює»: scope на td</caption>
<tr>
<td></td>
<td scope="col">2001</td>
<td scope="col">2021</td>
</tr>
<tr>
<td scope="row">Київ</td>
<td>2 611 000</td>
<td>2 952 000</td>
</tr>
<tr>
<td scope="rowgroup">Львів</td>
<td>725 000</td>
<td>717 000</td>
</tr>
</table>
<table class="ok">
<caption>Хибне значення — те саме, що атрибута немає</caption>
<tr>
<th scope="column">2001</th>
<th>2021</th>
</tr>
<tr>
<td>2 611 000</td>
<td>2 952 000</td>
</tr>
</table>CSS
table {
margin-bottom: 24px;
border-collapse: collapse;
}
caption {
margin-bottom: 6px;
font-weight: 600;
text-align: left;
}
td,
th {
padding: 6px 10px;
border: 1px solid #b9c6d8;
}
th {
background: #eef3fb;
}
[scope]::after {
font-family: ui-monospace, monospace;
font-size: .8em;
font-weight: 400;
color: #1b4f9c;
content: " [scope=" attr(scope) "]";
}
td[scope] {
background: #fff4f4;
}
td[scope]::after {
color: #c0392b;
}
.bad {
outline: 2px dashed #d64545;
outline-offset: 3px;
}
.bad caption {
color: #c0392b;
}Найпростіший приклад використання HTML атрибута scope теґа <td>
HTML
<p>Приклад використання атрибута "scope"</p>
<table border="1" width="300">
<tr>
<th></th>
<th scope="col">Місяць</th>
<th scope="col">Прибуток (грн)</th>
</tr>
<tr>
<td scope="row">1</td>
<td>Вересень</td>
<td>270</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Жовтень</td>
<td>420</td>
</tr>
<tr>
<td scope="row">3</td>
<td>Листопад</td>
<td>1200</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;
}Різниця між HTML 4.01 та HTML5
Атрибут scope для тега <td> не підтримується у HTML5.
Коментарі
Коментарів ще немає — будьте першим!