Lesson 55 of 55 · HTML
Tables
Duration: 10 min
Tabular Data (<table>)
<table>
<caption>Quarterly Sales</caption>
<thead>
<tr>
<th scope='col'>Region</th>
<th scope='col'>Q1</th>
<th scope='col'>Q2</th>
</tr>
</thead>
<tbody>
<tr>
<th scope='row'>North America</th>
<td>1200</td>
<td>1300</td>
</tr>
<tr>
<th scope='row'>Europe</th>
<td>900</td>
<td>950</td>
</tr>
</tbody>
</table>
Key elements
<caption>– Provides a textual description for screen readers and improves SEO.<thead>,<tbody>,<tfoot>– Group rows semantically; aids screen‑reader navigation.scope– Clarifies whether a<th>labels a column (col) or a row (row).colspan,rowspan– Merge cells when needed (e.g., for section headers).
Accessibility tips
- Never use tables for layout – use CSS Grid or Flexbox instead.
- Provide a concise, unique
<caption>. - Use
scopeorid/headersattributes for complex tables. - For mobile devices, wrap the table in a container with
overflow-x:autoto allow horizontal scrolling without breaking the layout.
Responsive table pattern
.responsive-table {
width: 100%;
border-collapse: collapse;
overflow-x:auto;
}
Apply the class to the <table> element to create a scrollable table on small screens.
Tip: Test your tables with a screen reader (e.g., NVDA) to verify that headings are announced correctly and that the table is navigable.
Quick checklist for tables
<caption>present and descriptive? ✅<th>elements includescopeattribute? ✅- Table wrapped in a scrolling container for mobile? ✅
- No presentational attributes (e.g.,
border="1")? ✅ - Complex tables use
id/headersfor cell relationships? ✅
If any answer is “no”, adjust the markup accordingly.