Загрузка...

Заголовки таблиц HTML

После размеров эта тема про смысл подписей: th, scope, caption. Оформление остаётся в CSS.

Почему заголовок — не просто жирный `td`

Вспомогательным технологиям нужен настоящий th. Жирный td может выглядеть так же без семантики.

Прямой ответ

Подписывайте через th. При необходимости используйте scope и <caption>. Значения оставляйте в td.

Заголовки столбцов с caption

Верхний ряд th scope="col" плюс caption.

Column headers and caption

html

HTML Code

<table>
<caption>Weekly inventory</caption>
<tr>
<th scope="col">Item</th>
<th scope="col">Qty</th>
<th scope="col">Aisle</th>
</tr>
<tr>
<td>Notebook</td>
<td>12</td>
<td>B2</td>
</tr>
<tr>
<td>USB cable</td>
<td>7</td>
<td>A1</td>
</tr>
</table>

Разбор примера столбцов

caption внутри table
верхние th с scope=col
количества в td

Заголовки строк для именованных записей

Имя строки — th scope="row", часто вместе с заголовками столбцов.

Row headers with a header row

html

HTML Code

<table>
<caption>Team scores</caption>
<tr>
<th scope="col">Name</th>
<th scope="col">Points</th>
<th scope="col">Level</th>
</tr>
<tr>
<th scope="row">Ada</th>
<td>98</td>
<td>A</td>
</tr>
<tr>
<th scope="row">Lin</th>
<td>91</td>
<td>B</td>
</tr>
</table>

Разбор примера строк

сверху scope=col
Ada/Lin scope=row
очки в td

Карта scope

Краткая справка по значениям.

📊 scope attribute values

Value	Typical use	Example cell
col	Header labels a column	Top “Qty” label
row	Header labels a row	Side “Ada” name
colgroup	Header for a group of columns	Advanced multi-header grids
rowgroup	Header for a group of rows	Advanced sectioned tables

В этом курсе сначала освойте col и row.

Практика

Таблица клуба на 3 столбца
caption
th scope=col сверху
th scope=row для имён
временно верните td и сравните

Частые ошибки

жирный td вместо th
caption вне table
забытый scope на смешанной сетке
все ячейки как th

Кратко

th — настоящий заголовок
scope связывает столбец или строку
caption называет таблицу
данные в td

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓

Вопросы

🎯

70%

Для Прохождения

♾️

∞

Время

🔄

∞

Попытки

📝 Инструкции

Внимательно прочитайте каждый вопрос
Выберите лучший ответ на каждый вопрос
Вы можете пересдавать тест столько раз, сколько захотите
Ваш прогресс будет показан вверху

Язык