An HTML table consists of the <table> tag and one or more <tr>, <th>, and <td> tags. Tables are for tabular data — not for page layout.
HTML Tables — The Basics
A table in HTML consists of table rows (<tr>), table headers (<th>), and table data (<td>):
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>15</td>
<td>31</td>
<td>46</td>
</tr>
</table>Table Borders
Without borders, the table may not be visible. Here are some different ways to add borders:
<!-- Using CSS (recommended) -->
<table style="border-collapse: collapse; width: 100%;">
<tr style="border: 1px solid #ddd;">
<th style="border: 1px solid #ddd; padding: 8px;">Name</th>
<th style="border: 1px solid #ddd; padding: 8px;">Age</th>
</tr>
<tr style="border: 1px solid #ddd;">
<td style="border: 1px solid #ddd; padding: 8px;">Alice</td>
<td style="border: 1px solid #ddd; padding: 8px;">28</td>
</tr>
</table>💡 Tip: Always use CSS for table styling instead of the old
borderattribute. It gives you much more control.
Table Headers — <th>
Table headers are defined with the <th> tag. Header cells are displayed as bold and centered by default.
Colspan — Columns
If a table cell should span over two or more columns, use the colspan attribute:
<table>
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>Rowspan — Rows
If a table cell should span over two or more rows, use the rowspan attribute:
Table Sections — <thead>, <tbody>, <tfoot>
For better semantics, use <thead> for headers, <tbody> for body rows, and <tfoot> for footer rows:
<table>
<thead>
<tr><th>Month</th><th>Savings</th></tr>
</thead>
<tbody>
<tr><td>January</td><td>$100</td></tr>
<tr><td>February</td><td>$80</td></tr>
</tbody>
<tfoot>
<tr><td>Total</td><td>$180</td></tr>
</tfoot>
</table>Complete Table Example
Knowledge Check
4 questions — test your understanding
What is the difference between <th> and <td>?
What does colspan="2" do?
Why use <thead>, <tbody>, and <tfoot>?
Should you use tables for page layout?
Next: HTML Forms