Tables are used in HTML documents (web pages) to present tabular data.

Using Tables

Table Code Sample: Simple Table

<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 Code Sample: Complex Table

<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>
A complex 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

About Table-Based Layout

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.

You should not use table-based layout under any circumstances. Instead, check out our CSS Tutorials to start learning about modern web site layout.

However, that doesn't mean you should avoid tables — tables should be used whenever you need to present information in a tabular format.