Sign in Get started

HTML Tutorial · HTML Basics · Lesson 9 of 34

HTML Tables

Build accessible data tables with headers, captions and spanning cells.

Table structure

Element Purpose
<table> the table
<caption> a title for the table
<thead>, <tbody>, <tfoot> header, body and footer row groups
<tr> a row
<th> a header cell (scope="col" or scope="row")
<td> a data cell
Example 1Try it yourself
<style>
  table { border-collapse: collapse; font-family: sans-serif; }
  th, td { border: 1px solid #ccc; padding: 6px 10px; text-align: left; }
  thead { background: #f1f5f9; }
</style>
<table>
  <caption>Quarterly sales</caption>
  <thead>
    <tr><th scope="col">Product</th><th scope="col">Q1</th><th scope="col">Q2</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Books</th><td>120</td><td>150</td></tr>
    <tr><th scope="row">Games</th><td>80</td><td>95</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">Total</th><td colspan="2">445</td></tr>
  </tfoot>
</table>

colspan and rowspan make a cell span several columns or rows.

Use tables for tabular data only — never for page layout (that's what CSS flexbox and grid are for).

Test yourself

Which element defines a header cell in a table?

  1. <td>
  2. <th>
  3. <thead>
  4. <header>
Show answer

Answer: <th>