HTML Tables
Tables display data in rows and columns. Perfect for pricing comparisons, schedules, and data grids. They were infamously abused for page layout in the 1990s before CSS existed.
Basic Table
Example — Simple Two-Column Table
<table> <thead> <tr> <th scope="col">Name</th> <th scope="col">Score</th> </tr> </thead> <tbody> <tr> <td>Shiva</td> <td>95%</td> </tr> </tbody> </table>
| Name | Score |
|---|---|
| Shiva | 95% |
| Rahul | 88% |
Full Table with caption and tfoot
Example — Complete Table Structure
<table> <caption>CIWeb Course Plans</caption> <thead> <!-- column headers --> <tbody> <!-- data rows --> <tfoot> <!-- totals or notes --> </table>
Screen readers announce caption first. tfoot is printed on every page of long printed tables.
Merging Cells with colspan and rowspan
Example — colspan Merges Columns
<tr> <td colspan="2">This spans 2 columns</td> </tr> <tr> <td>Col 1</td> <td>Col 2</td> </tr>
| This spans 2 columns | |
| Col 1 | Col 2 |
Table TagsFull Reference
<table>Container. Style with CSS, not old HTML border attribute
<caption>Table title. Screen readers announce it first
<thead> <tbody> <tfoot>Semantic groups for header, data, and footer rows
<tr>Table row. Every row must be inside tr
<th>Header cell. Bold and centered. Add scope="col" or scope="row"
<td>Data cell. Regular content goes here
colspan rowspanMerge cells across columns or rows
Tables for Layout is Wrong
Never use tables for page layout. That 1990s practice breaks responsive design, fails accessibility audits, and is a red flag in job interviews. Use CSS Flexbox or Grid instead.
The Table Layout Era
Before CSS, developers used invisible 1x1 pixel GIF images and up to 50 nested tables for layouts. CSS Grid finally made this completely obsolete in 2017.