HTML table trình bày dữ liệu dạng bảng (các hàng và cột dữ liệu liên quan) — không phải để layout. Một table có accessibility dùng cấu trúc đúng để screen reader có thể thông báo header cùng với mỗi cell.
Q2 Sales by Region
Region
Revenue
North
$12,000
South
$9,500
Total$21,500
<th> với scope — đánh dấu các header cell. scope="col" cho header cột, scope="row" cho header hàng. Screen reader khi đó thông báo "North, Revenue: $12,000" thay vì đọc các cell mà không có ngữ cảnh.<caption> — một tiêu đề cho toàn bộ table, là con đầu tiên của <table>; được đọc to để định hướng người dùng.<thead>/<tbody>/<tfoot> — nhóm các hàng header, thân và tóm tắt; giúp điều hướng và cho phép header lặp lại khi in.<!-- ❌ đây là cách làm của thập niên 1990 — hãy dùng CSS grid/flexbox -->
<table><tr><td>sidebar</td><td>content</td></tr></table>
Table dùng để layout gây nhầm lẫn cho screen reader (chúng thông báo ngữ nghĩa bảng dữ liệu) và thiếu linh hoạt. Hãy dùng CSS Grid/Flexbox để layout trang.
Ngữ nghĩa table đúng cách (<th scope>, <caption>, phân vùng) là thứ làm cho bảng dữ liệu dùng được với người dùng screen reader — chúng gắn mỗi giá trị với header hàng và cột của nó.
Hãy dành <table> riêng cho dữ liệu dạng bảng thực sự.