<table>
element, and contains a number of table cells ( <td>
, for “table data” ) which are organized into table rows ( <tr>
). The markup (HTML code) for a table is always based on rows, never columns.<th>
(table header) element.colspan
and rowspan
attributes.<thead>
— Table header<tbody>
— Table body<tfoot>
— Table footer<caption>
element.<col>
and <colgroup>
to define table columns for styling. However, there are a number of limitations with this practice.<table>
<tr>
<th>Name</th>
<th>Favorite Color</th>
</tr>
<tr>
<td>Bob</td>
<td>Yellow</td>
</tr>
<tr>
<td>Michelle</td>
<td>Purple</td>
</tr>
</table>
Name | Favorite Color |
---|---|
Bob | Yellow |
Michelle | Purple |
<table>
<caption>A complex table</caption>
<thead>
<tr>
<th colspan="3">Invoice #123456789</th>
<th>14 January 2025
</tr>
<tr>
<td colspan="2">
<strong>Pay to:</strong><br>
Acme Billing Co.<br>
123 Main St.<br>
Cityville, NA 12345
</td>
<td colspan="2">
<strong>Customer:</strong><br>
John Smith<br>
321 Willow Way<br>
Southeast Northwestershire, MA 54321
</td>
</tr>
</thead>
<tbody>
<tr>
<th>Name / Description</th>
<th>Qty.</th>
<th>@</th>
<th>Cost</th>
</tr>
<tr>
<td>Paperclips</td>
<td>1000</td>
<td>0.01</td>
<td>10.00</td>
</tr>
<tr>
<td>Staples (box)</td>
<td>100</td>
<td>1.00</td>
<td>100.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3">Subtotal</th>
<td> 110.00</td>
</tr>
<tr>
<th colspan="2">Tax</th>
<td> 8% </td>
<td>8.80</td>
</tr>
<tr>
<th colspan="3">Grand Total</th>
<td>$ 118.80</td>
</tr>
</tfoot>
</table>
Invoice #123456789 | 14 January 2025 | ||
---|---|---|---|
Pay to: Acme Billing Co. 123 Main St. Cityville, NA 12345 |
Customer: John Smith 321 Willow Way Southeast Northwestershire, MA 54321 |
||
Name / Description | Qty. | @ | Cost |
Paperclips | 1000 | 0.01 | 10.00 |
Staples (box) | 100 | 1.00 | 100.00 |
Subtotal | 110.00 | ||
Tax | 8% | 8.80 | |
Grand Total | $ 118.80 |
It was common in the early days of the web to use tables as a layout device. Before the advent of modern standards-based browsers, this was the easiest way to make sure that page elements were arranged properly on the screen.
This design pattern is now considered very bad. It is bad for the user experience, bad for SEO, and bad for developers who have to maintain pages.
However, that doesn’t mean you should avoid tables — tables should be used whenever you need to present information in a tabular format.
Our HTML tutorials teach you how to create a personal website or site for your business, without forcing you to learn unnecessary theory. We’ll get you building your new website in minutes, not hours.
Our most popular beginners tutorials include:-
We’ve plenty of topics for intermediate and advanced HTML learners, too:-