5. HTML Tables: How to Display Structured Data on the Web

Hey there!

Now that you’re comfortable with structuring pages and nesting elements, let’s talk about something super useful: HTML Tables.

Tables are perfect when you want to display information in rows and columns, like schedules, product lists, pricing charts, or data grids.

In this guide, you’ll learn:

What tables are and when to use them
The key tags that make up a table
How to create and style your first table
Accessibility and best practices

Let’s dive in!

What Is an HTML Table?

An HTML table lets you arrange content into rows and columns. It’s like a spreadsheet, but in HTML.

Here’s a simple example:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>24</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>30</td>
  </tr>
</table>

Output:

Name	Age
Alice	24
Bob	30

🧩 Key Table Tags Explained

Here are the essential tags that make up any HTML table:

Tag	Purpose
`<table>`	The table wrapper element
`<tr>`	Table row (each row in the table)
`<th>`	Table header cell (usually bold)
`<td>`	Table data cell (regular cell content)
`<thead>`	Optional group for header rows
`<tbody>`	Optional group for the body of the table
`<tfoot>`	Optional group for footer rows

Building a Table Step by Step

Let’s build a pricing table example:

<table>
  <thead>
    <tr>
      <th>Plan</th>
      <th>Price</th>
      <th>Features</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Basic</td>
      <td>$9/mo</td>
      <td>1 Project</td>
    </tr>
    <tr>
      <td>Pro</td>
      <td>$29/mo</td>
      <td>Unlimited Projects</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Prices are subject to change</td>
    </tr>
  </tfoot>
</table>

What’s happening:

<thead>, <tbody>, and <tfoot> make your table more structured
<th> is used for header cells (usually bold and centered by default)
colspan="3" lets a cell stretch across 3 columns

Adding Some Basic Styling

Tables look a bit plain with raw HTML. You can use CSS to style them:

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
  }

  th {
    background-color: #f4f4f4;
  }
</style>

Just place this inside the <head> of your HTML or link an external stylesheet.

When to Use Tables (and When Not To)

Use tables for:

Displaying tabular data (like prices, schedules, product lists)
Reports or structured records

Don’t use tables for layout!

In the early days of the web, developers used tables to create multi-column layouts. That’s outdated now. Use CSS Grid or Flexbox for layout instead.

Accessibility Tips for Tables

Making tables accessible helps all users, including those using screen readers.

Always use <th> for headers
Use the scope attribute to define relationships (e.g., scope="col" or scope="row")
Avoid using tables for page layout

Example:

<th scope="col">Name</th>
<th scope="row">Row Header</th>

Practice Example: Class Schedule

Try writing this table on your own!

<table>
  <thead>
    <tr>
      <th>Day</th>
      <th>Subject</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Monday</td>
      <td>Math</td>
      <td>9:00 AM</td>
    </tr>
    <tr>
      <td>Tuesday</td>
      <td>Science</td>
      <td>10:00 AM</td>
    </tr>
  </tbody>
</table>

Play around! Try adding more rows, use colspan or rowspan, and experiment with table styles.

Final Thoughts

Tables are a simple but powerful tool in HTML. Once you understand how to structure rows and columns, you can display all kinds of data in an organized way.

Just remember:

Use tables for data, not layout
Structure them properly using <thead>, <tbody>, and <tfoot> when needed
Combine with CSS for better visual design
Keep accessibility in mind with clear headers and scopes

Practice by recreating a real-world table—maybe a comparison chart, class schedule, or even a leaderboard. The more you use tables, the more intuitive they’ll become!