What is the difference between and ?

th is a header cell, td is a data cell

HTML Tables — HTML Fundamentals (Lesson 7)

Tables display data in rows and columns — schedules, prices, comparisons, statistics. They have a few moving parts, but the pattern is logical once you see it.

The basic table

A table is built from rows, and each row contains cells. Use <code><table></code> for the table, <code><tr></code> for each table row, <code><th></code> for header cells, and <code><td></code> for data cells.

HTML · editable

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>28</td>
  </tr>
  <tr>
    <td>Ben</td>
    <td>34</td>
  </tr>
</table>

A basic table — try adding a row.

Structuring with thead, tbody and caption

For clarity and accessibility, group the header row in <code><thead></code> and the data rows in <code><tbody></code>. A <code><caption></code> right after the opening table tag gives the table a title that screen readers announce.

HTML · editable

<table border="1">
  <caption>Team ages</caption>
  <thead>
    <tr><th>Name</th><th>Age</th></tr>
  </thead>
  <tbody>
    <tr><td>Anna</td><td>28</td></tr>
    <tr><td>Ben</td><td>34</td></tr>
  </tbody>
</table>

Spanning cells

A cell can stretch across multiple columns with <code>colspan</code>, or down multiple rows with <code>rowspan</code>. This is how you build more complex layouts like merged headers.

HTML · editable

<table border="1">
  <tr>
    <th colspan="2">Contact</th>
  </tr>
  <tr>
    <td>Email</td>
    <td>hi@site.com</td>
  </tr>
</table>

colspan merges two columns into one header.

Tables are for dataTables are for tabular data, not for page layout. In the early web people built whole layouts with tables — today that is done with CSS. Use a table only when your content really is a grid of data.

Try it yourself: a timetable

Build a small timetable in the editable box: a caption, a thead with day and subject columns, and a tbody with three rows of data. Bonus: use colspan on a header.

Quick quiz

1. What element is a table row?

2. What is the difference between <th> and <td>?

3. Which attribute makes a cell span two columns?

4. When should you use a table?

Key takeaways

Tables use <table>, rows <tr>, header cells <th> and data cells <td>.
Group with <thead>/<tbody> and title with <caption> for accessibility.
Use colspan and rowspan to span columns or rows.
Use tables for data, never for page layout.

The basic table

Structuring with thead, tbody and caption

Spanning cells

Related lessons