Loading...
Loading...
Organize data into rows and columns with HTML tables
Tables display data in rows and columns — like a spreadsheet. They're the right choice for data (schedules, prices, comparisons), NOT for page layout (use CSS for that).
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
<td>London</td>
</tr>
</tbody>
</table>| Element | What it does |
|---|---|
| `<table>` | Wraps the entire table |
| `<thead>` | Header section (column titles) |
| `<tbody>` | Body section (data rows) |
| `<tr>` | A row |
| `<th>` | A header cell (bold by default) |
| `<td>` | A data cell |
<table>
<tr>
<th colspan="2">Full Name</th>
<th>Grade</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>A</td>
</tr>
</table><table>
<caption>Employee Directory</caption>
<tr>
<th>Name</th>
<th>Role</th>
</tr>
<tr>
<td>Alice</td>
<td>Developer</td>
</tr>
</table>| ❌ Wrong | Why | ✅ Right |
|---|---|---|
| Using tables for page layout | Tables are for data — they don't stack well on mobile | Use CSS Flexbox or Grid for layout |
| Mismatched column counts | Row with 4 cells, next row has 3 — layout breaks | Use `colspan` spans or add missing cells |
| Missing `<thead>`/`<tbody>` | Works but less semantic and harder to style | Always use `<thead>` for headers, `<tbody>` for data |
Create a table with:
<table>
<caption>Weekly Schedule</caption>
<thead>
<tr>
<th>Day</th>
<th>Activity</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>Study HTML</td>
<td>9:00 AM</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Practice CSS</td>
<td>10:00 AM</td>
</tr>
<tr>
<td>Friday</td>
<td>Build project</td>
<td>2:00 PM</td>
</tr>
</tbody>
</table>