Таблицы HTML представляют табличные данные (строки и столбцы связанных данных) — а не макет. Доступная таблица использует правильную структуру, чтобы программы чтения с экрана могли объявлять заголовки вместе с каждой ячейкой.
Q2 Sales by Region
Region
Revenue
North
$12,000
South
$9,500
Total$21,500
<th> с scope — отмечает ячейки заголовков. scope="col" для заголовков столбцов, scope="row" для заголовков строк. Программы чтения с экрана затем объявляют "North, Revenue: $12,000" вместо чтения ячеек без контекста.<caption> — название всей таблицы, первый потомок <table>; читается вслух для ориентации пользователей.<thead>/<tbody>/<tfoot> — группируют строки заголовка, основного содержимого и итогов; помогают навигации и позволяют повторять заголовок при печати.<!-- ❌ this was 1990s practice — use CSS grid/flexbox instead -->
<table><tr><td>sidebar</td><td>content</td></tr></table>
Таблицы макета запутывают программы чтения с экрана (они объявляют семантику таблицы данных) и неэластичны. Используйте CSS Grid/Flexbox для макета страницы.
Правильная семантика таблицы (<th scope>, <caption>, разделение на секции) — это то, что делает таблицы данных удобными для пользователей программ чтения с экрана — они связывают каждое значение с его заголовками строк и столбцов.
Зарезервируйте <table> исключительно для подлинных табличных данных.