HTML Tables
When to use tables
Tables are for tabular data — information that belongs in rows and columns, like spreadsheets, schedules, or comparison charts.
Do not use tables for page layout. That was common in the early 2000s, but CSS Flexbox and Grid are far better tools for layout today.
Basic table structure
HTML
<table>
<thead>
<tr>
<th>Name</th>
<th>Role</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>Developer</td>
<td>London</td>
</tr>
<tr>
<td>Bob</td>
<td>Designer</td>
<td>Berlin</td>
</tr>
</tbody>
</table><table>wraps the entire table.<thead>contains header rows;<tbody>contains data rows.<tr>is a table row.<th>is a header cell (bold and centered by default);<td>is a data cell.
Spanning rows and columns
Sometimes a cell needs to stretch across multiple columns or rows:
HTML
<table>
<tr>
<th colspan="2">Full Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>30</td>
</tr>
</table>colspan="2" makes the header span two columns. rowspan works the same way vertically.Adding a caption
HTML
<table>
<caption>Employee Directory — Q1 2026</caption>
<thead>
<tr>
<th>Name</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>Engineering</td>
</tr>
</tbody>
</table>Captions are great for accessibility — they tell screen readers what the table is about.
Making tables accessible
- Always use
<th>for headers, not styled<td>. - Add
scope="col"orscope="row"to<th>elements so screen readers know which direction the header applies to. - Use
<caption>to describe the table.
HTML
<table>
<caption>Monthly sales by region</caption>
<thead>
<tr>
<th scope="col">Region</th>
<th scope="col">January</th>
<th scope="col">February</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">North</th>
<td>$12,000</td>
<td>$15,000</td>
</tr>
</tbody>
</table>Styling tables with CSS
Default tables look plain. Here's a clean, modern look:
CSS
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid #e2e8f0;
}
th {
background: #f8fafc;
font-weight: 600;
}
tbody tr:hover {
background: #f1f5f9;
}border-collapse: collapse removes the double-border effect that tables have by default.Key takeaway
Use tables only for tabular data. Structure them with
<thead>, <tbody>, <th>, and <td>. Add scope attributes and <caption> for accessibility. Style with CSS, not HTML attributes.