Атрибут scope тега <th> — до чого належить заголовок

Атрибут scope - визначає спосіб зв'язування комірок із заголовками та комірок з даними.

Атрибут scope ідентифікує заголовки стовпчиків та рядків або групи стовпчиків чи рядків.

За своєю дією нагадує атрибут headers, але використовується для простих таблиць. Атрибут призначений для екранних рідерів на подобі мовних браузерів, в звичайних браузерах результат додавання scope ніяк не помітний.

правити

Загальний опис

правити

+ додати пораду чи нотатку

Синтаксис

<th scope="col | colgroup | row | rowgroup">...</th>

Атрибут scope може отримувати 4 значень:

col

Вказує, що комірка це заголовок для стовпчика.

автор: с3с

правити

row

Вказує, що комірка це заголовок для рядка.

автор: с3с

правити

colgroup

Вказує, що комірка це заголовок для групи стовпчиків.

автор: с3с

правити

rowgroup

Вказує, що комірка це заголовок для групи рядків.

автор: с3с

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	15	12	≤11

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<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>

table,th,td{
  border: 1px solid grey;
  text-align:center;
} 

td{
   padding:10px;
 
}
th,td{
   padding:10px;
}
caption{
  font-size:20px;
}

<table>
  <caption>Прибуток за місяцями, грн</caption>
  <tr>
    <th></th>
    <th scope="col">Вересень</th>
    <th scope="col">Жовтень</th>
  </tr>
  <tr>
    <th scope="row">Магазин</th>
    <td>270</td>
    <td>310</td>
  </tr>
  <tr>
    <th scope="row">Сайт</th>
    <td>1 200</td>
    <td>1 450</td>
  </tr>
</table>

table { border-collapse: collapse; }
th, td { border: 1px solid #999; padding: 6px 14px; text-align: right; }
th[scope="row"] { text-align: left; }
caption { padding-bottom: 6px; font-weight: 600; }