HTML Tables

Definition and Usage

An HTML table presents tabular data—information arranged in rows and columns so you can look up a value by matching a row with a column (price lists, schedules, scores, employee directories).

What belongs on the page?

Start with <table>, put each row in <tr>, and put each cell in <td> (data) or <th> (header). Optional caption, thead, tbody, and tfoot make larger tables clearer.

What tables are not for

Do not use tables to lay out a whole webpage (sidebars, headers, multi-column design). That belongs to CSS. Tables used only for layout are hard for assistive tech and brittle to maintain.

How do people read a table?

Sighted users connect cells visually to headers. Screen readers do the same when you mark headers with th (and scope when helpful). Good structure makes both paths work.

HTML Syntax

Minimal table, then a structured table with headers and sections:

<table>
  <tr>
    <td>Apple</td>
    <td>Red</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>Yellow</td>
  </tr>
</table>

<table>
  <caption>Store prices</caption>
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Notebook</td>
      <td>$4.99</td>
    </tr>
  </tbody>
</table>

Core HTML Concepts

Building blocks of an HTML data table:

When to use a table

Spanning cells

How to Build a Table in HTML

A practical workflow:

1. Confirm the content is tabular data (not page layout).
2. Open <table>; add an optional <caption>.
3. Create a header row with <th> (often inside <thead>).
4. Add data rows with <tr> + <td> (often inside <tbody>).
5. Use tfoot for totals; use colspan/rowspan only when needed.
6. Style borders and spacing with CSS (border-collapse, padding)—not presentational HTML attributes from the 1990s.

Live Preview

Toggle header cells and a caption on a small product table.

HTML Examples

Six patterns: basic grid, headers, sections, spanning, CSS styling, and a full employee table.

<table>
  <tr><td>Apple</td><td>Red</td></tr>
  <tr><td>Banana</td><td>Yellow</td></tr>
</table>

<table>
  <thead>
    <tr><th>Product</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>Notebook</td><td>$4.99</td></tr>
    <tr><td>Pen</td><td>$1.25</td></tr>
  </tbody>
</table>

<table>
  <thead>
    <tr><th>Item</th><th>Qty</th><th>Cost</th></tr>
  </thead>
  <tbody>
    <tr><td>Coffee</td><td>2</td><td>$6.00</td></tr>
    <tr><td>Bagel</td><td>1</td><td>$3.50</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="2">Total</td><td>$9.50</td></tr>
  </tfoot>
</table>

<table>
  <tr><th colspan="2">Schedule</th></tr>
  <tr>
    <td rowspan="2">Mon</td>
    <td>Math</td>
  </tr>
  <tr><td>Science</td></tr>
</table>

<style>
  table { width: 100%; border-collapse: collapse; }
  th, td { border: 1px solid #ddd; padding: 8px; }
  th { background: #f4f4f4; }
  tr:nth-child(even) { background: #f9f9f9; }
</style>
<table>
  <thead><tr><th>Name</th><th>Score</th></tr></thead>
  <tbody>
    <tr><td>Alice</td><td>92</td></tr>
    <tr><td>Bob</td><td>85</td></tr>
  </tbody>
</table>

<table>
  <caption>Employee List</caption>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Position</th>
      <th>Department</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>Software Engineer</td>
      <td>Development</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane Smith</td>
      <td>Project Manager</td>
      <td>Operations</td>
    </tr>
  </tbody>
</table>

Key Takeaways