Free HTML tutorial

HTML Tables

HTML tables organize related information into rows and columns. Use table elements for data that belongs in a grid, not as a tool for laying out an entire web page.

Build a simple data table

Use <table> as the container, <tr> for each row, <th> for headings and <td> for data cells.

<table>
  <caption>Weekly study plan</caption>
  <thead>
    <tr><th scope="col">Day</th><th scope="col">Topic</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Monday</th><td>HTML</td></tr>
    <tr><th scope="row">Tuesday</th><td>CSS</td></tr>
  </tbody>
</table>

Use headings and captions

A caption names the table. Mark row or column headings with <th> and choose an appropriate scope value so assistive technologies can associate headings with their data.

For narrow screens, let a wide data table scroll horizontally instead of shrinking its text until it is hard to read.

Group related rows and columns

Use <thead> for the table’s header rows and <tbody> for its main data rows. These elements make the structure clearer and can also help when styling or processing a table. A <tfoot> element can group summary rows such as a total.

For a table with column headings, put scope="col" on each heading cell. If the first cell in each row names that row, use <th scope="row"> so the relationship is clear to assistive technology.

Join cells only when the data needs it

The colspan attribute makes a cell span multiple columns, and rowspan makes it span multiple rows. Use these when one value genuinely applies to several cells, and keep the resulting header relationships understandable.

<tr>
  <th scope="row">Total</th>
  <td colspan="2">$45</td>
</tr>

Make a wide table usable on small screens

Keep the table’s text readable. If it has many columns, place it in a wrapper that can scroll horizontally instead of shrinking the content until it becomes difficult to scan. Use CSS Grid or Flexbox for page layout; reserve an HTML table for information whose rows and columns describe relationships in the data.

HTML table questions

Should I use a table to position page content?

No. Tables describe tabular data. Use CSS layout tools such as Grid or Flexbox to arrange page sections.

What is the difference between `<th>` and `<td>`?

<th> marks a heading cell that labels a row or column. <td> contains ordinary data for that table.