Reference Table Used in This Section
Several notes below build on this same example — a simple student marks table:
<table>
<caption>Semester 1 Results</caption>
<thead>
<tr>
<th>Student</th>
<th>Math</th>
<th>Science</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aman</td>
<td>92</td>
<td>88</td>
</tr>
<tr>
<td>Priya</td>
<td>85</td>
<td>91</td>
</tr>
</tbody>
</table>What Tables Are For
The <table> element displays genuinely tabular data — rows and columns of related values, like a spreadsheet. It was widely misused for page layout in the early 2000s; modern HTML reserves it strictly for real data.
Browser output
A grid with a bold caption above it, bold column headers in the first row, and each student's marks in the rows beneath — the browser adds borders/spacing based on your CSS, but the structure itself comes entirely from the markup above.
The Building Blocks
| Element | Role |
|---|---|
| table | The outer container for the whole table |
| caption | A title describing the table's content |
| thead / tbody / tfoot | Grouping rows into header, body, and footer sections |
| tr | A single row |
| th | A header cell |
| td | A regular data cell |
| colspan / rowspan | Merging cells across columns or rows |
Common Mistakes
- Using
<table>for page layout (positioning a logo, nav, and sidebar in table cells) — this was a common early-2000s hack; use CSS Grid or Flexbox for layout today - Using
<div>elements styled to look like a grid for content that's genuinely tabular data — this loses all of the real accessibility and semantic benefits a true table provides
Best Practices
- Reserve
<table>strictly for real tabular data — never for visual page layout - Always include a
<caption>and proper<th>header cells
Accessibility Considerations
A properly marked-up table lets screen readers announce row/column headers as users move between cells ("Math, Aman: 92") — something no amount of CSS-styled <div> grid can replicate.
SEO Considerations
Well-structured tables can be pulled directly into search result rich snippets (comparison tables, pricing tables, spec sheets) when the markup is genuinely semantic.
Browser & Modern HTML Notes
Tables are one of the oldest parts of HTML, and their table-for-layout misuse era is now firmly behind modern web development — CSS Grid and Flexbox handle layout far better today.
Mini Practice
- Build a simple 2-column, 3-row table with a caption and header row.
- Identify why a photo gallery grid should be CSS Grid, not an HTML table.
