1.5 Tables: Rows, Columns, and Headers

Lists are good for one-dimensional information. Tables are for two-dimensional data: rows and columns. Use a table when readers need to compare values across records, such as a schedule, price list, grade report, feature matrix, or inventory.

The table builder below lets you change the number of rows and columns, turn the header on or off, and watch the HTML structure update.

The basic table structure

A table starts with <table>. Inside it, each <tr> creates one row. Inside each row, <td> creates a normal data cell.

<table>
  <tr>
    <td>HTML</td>
    <td>Structure</td>
  </tr>
  <tr>
    <td>CSS</td>
    <td>Style</td>
  </tr>
</table>

Read the structure from outside to inside:

• <table> wraps the whole table.
• <tr> means table row.
• <td> means table data cell.

Header cells

Most useful tables have a header row. Use <th> for header cells. Browsers make them bold by default, and screen readers can use them to understand what each column means.

<table>
  <tr>
    <th>Language</th>
    <th>Role</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>Structure</td>
  </tr>
  <tr>
    <td>CSS</td>
    <td>Style</td>
  </tr>
</table>

For a clearer document structure, you can group the header and body:

<table>
  <thead>
    <tr>
      <th>Language</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>Structure</td>
    </tr>
  </tbody>
</table>

Caption and accessibility

<caption> gives the table a title. Put it directly inside <table>, before the rows or groups.

<table>
  <caption>Frontend layers</caption>
  <tr>
    <th>Layer</th>
    <th>Purpose</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>Content and structure</td>
  </tr>
</table>

Use tables for real tabular data, not for page layout. CSS layout tools such as Flexbox and Grid are better for arranging page regions.