Table Headers, Rows, and Cells Explained

If you’ve ever seen a neat list of data on a website—like a price list, schedule, or product comparison—you’ve probably seen an HTML table in action.

In this article, you’ll learn what table headers, rows, and cells are, and how to build a simple table step-by-step. You don’t need any coding experience. By the end, you’ll be able to read and write basic table code with confidence.

---

What is an HTML table?

An HTML table is a way to show information in rows (horizontal lines) and columns (vertical lines). Think of a spreadsheet in Excel or Google Sheets—HTML tables are similar.

In HTML, a basic table is made of:

• <table> – the outer container (the whole table)
• <tr> – a table row (one horizontal line in the table)
• <th> – a table header cell (usually the labels at the top)
• <td> – a table data cell (the regular cells with data)

Don’t worry if this looks strange. You’ll see it in action next.

---

Step 1: Your first very simple table

Let’s start with the smallest possible table: one row and two cells.

<!-- A very simple table -->
<table>
  <tr> <!-- tr = table row -->
    <td>Apple</td> <!-- td = table data cell -->
    <td>Red</td>
  </tr>
</table>

What this does:

• <table> tells the browser: “This is a table.”
• <tr> creates one row.
• Each <td> creates a cell inside that row.

On a web page, this will look like a small 1-row, 2-column table with the words “Apple” and “Red” side by side.

Try it yourself

1. Open a simple text editor (like Notepad on Windows or TextEdit on Mac set to plain text).
2. Paste the code above into a file.
3. Save the file as table1.html.
4. Double-click the file to open it in your browser.

You’ve just created your first HTML table.

---

Step 2: Understanding rows (<tr>) and cells (<td>)

To build useful tables, you usually need more than one row. Remember:

• Rows are created with <tr>
• Cells inside rows are created with <td>

Let’s make a small table of fruits and their colors.

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

What’s happening here:

• We have one <table> and three <tr> elements.
• Each <tr> has two <td> cells.
• This creates a table with 3 rows and 2 columns.

On the page, you’ll see:

Apple	Red
Banana	Yellow
Grapes	Purple

(Your browser will add basic borders or spacing depending on its default style, but it may look very plain. That’s normal.)

---

Step 3: Adding headers with <th>

So far, our table shows data, but it doesn’t explain what each column means. That’s where table headers come in.

We use <th> (table header) instead of <td> for header cells. Header cells are usually in the first row and often appear bold and centered by default.

Let’s improve our fruit table by adding headers.

<table>
  <tr>
    <th>Fruit</th> <!-- th = table header cell -->
    <th>Color</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>Red</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>Yellow</td>
  </tr>
  <tr>
    <td>Grapes</td>
    <td>Purple</td>
  </tr>
</table>

What changed:

• The first row now uses <th> instead of <td>.
• We added column names: Fruit and Color.

Now your table will look more like this:

Fruit	Color
Apple	Red
Banana	Yellow
Grapes	Purple

The first row stands out as a header. This makes the table easier to understand and is better for accessibility (for example, for people using screen readers).

Tip: When to use <th> vs <td>

• Use <th> for labels: column titles or row titles.
• Use <td> for actual data: numbers, names, dates, etc.

---

Step 4: Labeling the head and body of a table

For simple tables, using just <table>, <tr>, <th>, and <td> is enough. But as you grow, it helps to know two extra tags:

• <thead> – wraps the header section of the table
• <tbody> – wraps the body (main data) of the table

These don’t change how the table looks, but they make your code more organized and can help with styling and accessibility.

Here’s our improved table with thead and tbody:

<table>
  <thead>
    <tr>
      <th>Fruit</th>
      <th>Color</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>Yellow</td>
    </tr>
    <tr>
      <td>Grapes</td>
      <td>Purple</td>
    </tr>
  </tbody>
</table>

What each part does:

• <thead> groups the header row(s).
• <tbody> groups the main data rows.
• The browser still shows the same table, but your code is clearer and more flexible.

Try it yourself

1. Take your previous file.
2. Replace your table code with the version that uses <thead> and <tbody>.
3. Refresh your browser.

You should see the same visual result, but your HTML structure is now more professional.

---

Step 5: A slightly bigger example – a class schedule

Let’s put all this together into a more realistic table: a simple class schedule. This will help you practice headers, rows, and cells in a meaningful way.

<table>
  <thead>
    <tr>
      <th>Day</th>
      <th>9:00 - 10:00</th>
      <th>10:00 - 11:00</th>
      <th>11:00 - 12:00</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Monday</td>
      <td>Math</td>
      <td>English</td>
      <td>Science</td>
    </tr>
    <tr>
      <td>Tuesday</td>
      <td>History</td>
      <td>Math</td>
      <td>Art</td>
    </tr>
    <tr>
      <td>Wednesday</td>
      <td>Computer</td>
      <td>English</td>
      <td>Sports</td>
    </tr>
  </tbody>
</table>

What you should see:

A table where:

• The top row labels the time slots.
• The first column shows the day.
• The cells in the middle show which class is at each time.

This is a very common use for tables: schedules, timetables, and calendars.

Try it yourself – Customize the schedule

• Change the day names (for example, use your language or add Thursday/Friday).
• Change the subjects to match your interests.
• Add another column for a new time slot.

This simple practice helps you get comfortable adding and editing rows and cells.

---

Common mistakes beginners make

Here are a few easy-to-fix issues you might run into:

1. Forgetting to close tags

   • Every <table>, <tr>, <th>, and <td> must have a closing tag like </table>, </tr>, </th>, and </td>.

2. Mismatched number of cells per row

   • If one row has 3 cells and another has 4, your table may look broken or uneven.
   • Try to keep the same number of <td> and <th> in each row (unless you’re using advanced features like colspan, which you can learn later).

3. Using <th> everywhere

   • Remember, <th> is for headers (labels), not for every cell.
   • Data goes in <td>.

If something looks strange, go back and check:

• Are all tags properly opened and closed?
• Does each row have the same number of cells?

---

What’s next?

You’ve learned:

• How a basic HTML table is structured with <table>, <tr>, <th>, and <td>.
• The difference between rows and cells.
• How to create headers using <th>.
• How to organize your table into <thead> and <tbody>.

That’s a great start. Many websites rely on tables to present data clearly. You now have the building blocks to create your own.

Keep practicing

• Create a price list for products (name, price, description).
• Make a personal schedule (day, task, time).
• Build a comparison table (for example, features of different phones or laptops).

Each time, think carefully about:

• What should be a header (<th>)?
• What should be data (<td>)?
• How many rows (<tr>) do you need?

With a bit of practice, table headers, rows, and cells will feel natural. You’ve already taken the hardest step—getting started. Keep going and experiment with your own ideas!