Introduction to Tables: <table>, <tr>, <td>, and <th>

A table organizes data into rows and columns. HTML has a dedicated set of elements for this — and specific rules about how they must be nested.

What is tabular data?

Tabular data is information that has a meaningful relationship across both rows and columns. A schedule, a price comparison, a stat sheet — these are all tables. The relationship between the row label and column header is what makes the data tabular.

If the content is just a list of items, use <ul> or <ol>. Tables are only for data that requires a row-and-column structure to be understood.

The four core elements

Element	Role
<table>	The container for the entire table
<tr>	A table row
<td>	A table data cell (regular cell)
<th>	A table header cell (labels a column or row)

The hierarchy is always: <table> → <tr> → <td> or <th>.

A minimal table

<table>
  <tr>
    <td>Monday</td>
    <td>9:00 AM</td>
  </tr>
  <tr>
    <td>Wednesday</td>
    <td>11:00 AM</td>
  </tr>
</table>

This creates two rows, each with two cells. The number of columns is determined automatically by the number of cells in each row.

Adding a header row with <th>

<th> marks a cell as a header — it communicates what the column (or row) represents. By default browsers render <th> bold and centered, but the real value is semantic: it tells screen readers and search engines that this cell is a label, not a data point.

<table>
  <tr>
    <th>Day</th>
    <th>Time</th>
  </tr>
  <tr>
    <td>Monday</td>
    <td>9:00 AM</td>
  </tr>
  <tr>
    <td>Wednesday</td>
    <td>11:00 AM</td>
  </tr>
</table>

The first <tr> now contains headers for the two columns. Every data row below it aligns to those headers.

Tables are not for layout

Before CSS was widely supported, developers used tables to create multi-column page layouts. You will still see this in old code. Do not do it today. Tables are for data only. Using them for layout harms accessibility, makes code harder to maintain, and breaks when users resize or print pages.

Layout is the responsibility of CSS — which you will learn in a later course.

Exercise

Open index.html in VS Code.

You are going to add a small data table inside one of your <section> elements in <main>. Choose a section where a table would make sense for your topic — a schedule, a comparison, a set of facts with labels and values.

1. Inside the section (below the existing <p> or <ul>), add a <table>.
2. Add a header row with two <th> elements that label your columns.
3. Add at least three data rows using <tr> and <td>.

Example:

<section>
  <h2>Trail Difficulty Ratings</h2>
  <p>Trails are rated by length and elevation change:</p>
  <table>
    <tr>
      <th>Rating</th>
      <th>Typical Distance</th>
    </tr>
    <tr>
      <td>Easy</td>
      <td>Under 5 miles</td>
    </tr>
    <tr>
      <td>Moderate</td>
      <td>5–10 miles</td>
    </tr>
    <tr>
      <td>Strenuous</td>
      <td>Over 10 miles</td>
    </tr>
  </table>
</section>

4. Save and open index.html in your browser. The table will render without borders by default — CSS adds those later.

Recap

• <table> is the container. <tr> is a row. <td> is a data cell. <th> is a header cell.
• Columns are formed automatically by cell count per row.
• <th> provides semantic meaning — it labels a row or column, not just bold text.
• Tables represent structured, relational data. They are never used for page layout.