HTML Tables
Tables display data in rows and columns. Use tables only for tabular data — comparison charts, schedules, pricing tables, spreadsheet-like content. Do NOT use tables for page layout (that is what CSS is for).
Complete Table Structure
<table> <!-- thead: column headers --> <thead> <tr> <th scope="col">Course</th> <th scope="col">Lessons</th> <th scope="col">Price</th> </tr> </thead> <!-- tbody: data rows --> <tbody> <tr> <td>HTML</td> <td>22</td> <td>Free</td> </tr> <tr> <td>CSS</td> <td>18</td> <td>Free</td> </tr> </tbody> <!-- tfoot: summary row --> <tfoot> <tr> <td colspan="2">Total Lessons</td> <td>40</td> </tr> </tfoot> </table>
| Course | Lessons | Price |
|---|---|---|
| HTML | 22 | Free |
| CSS | 18 | Free |
| Total Lessons | 40 | |
Merging Cells: colspan and rowspan
<table> <thead> <tr> <th>Day</th> <!-- colspan spans 2 columns --> <th colspan="2">CIWeb Schedule</th> </tr> </thead> <tbody> <tr> <!-- rowspan spans 2 rows --> <td rowspan="2">Mon</td> <td>HTML Lesson</td> <td>9 AM</td> </tr> <tr> <td>CSS Lesson</td> <td>11 AM</td> </tr> </tbody> </table>
| Day | CIWeb Schedule | |
|---|---|---|
| Mon | HTML Lesson | 9 AM |
| CSS Lesson | 11 AM | |
In the early web, developers used tables to create multi-column layouts. This is wrong by modern standards. Tables are for tabular data only. Use CSS Flexbox or Grid for page layout — it is faster, cleaner, and more accessible.
Always use thead, tbody, and th with scope. Screen readers use these to announce column and row headers when navigating cells. A table without proper structure sounds like random numbers being read aloud to a blind user.
Add a caption tag as the first child of table to give it a visible title. Screen readers announce the caption before reading the table, so users know what the data is about before hearing any cells.