Tables and Data

Welcome back.

In the previous lesson, you learned how to add images and media to your pages.

Now we enter the world of tables.

Tables are useful.

Tables are powerful.

Tables are also often abused like someone found a hammer and decided every problem is now a nail.

So today we learn the correct way.

Tables are for data.

Not layout.

Not making buttons line up.

Not building an entire website like it is 1999 and the internet still smells like dial-up.

What You’ll Learn

In this lesson, you’ll learn:

• what HTML tables are for;
• how to use table;
• how to create rows with tr;
• how to create header cells with th;
• how to create data cells with td;
• how to add a table caption;
• how to use thead, tbody, and tfoot;
• why tables should not be used for page layout;
• how to make tables clearer and more meaningful.

What Is a Table?

A table is used to show structured data.

For example:

• prices;
• schedules;
• statistics;
• comparison data;
• invoices;
• lists of products;
• lesson plans;
• results.

A table has rows and columns.

Like a spreadsheet.

But in HTML.

And without the terrifying formulas hiding in cell F37.

A Basic Table

Here is a simple table:

<table>
  <tr>
    <th>Name</th>
    <th>Role</th>
  </tr>
  <tr>
    <td>Viktor</td>
    <td>Web Developer</td>
  </tr>
  <tr>
    <td>Anna</td>
    <td>Designer</td>
  </tr>
</table>

This creates a table with:

• one header row;
• two data rows;
• two columns.

The browser understands this as structured data.

Not random text pretending to be organized.

The table Element

The whole table starts with:

<table>

And ends with:

</table>

Everything inside the table belongs to the table.

Rows.

Headers.

Cells.

Captions.

A table is the container.

The big box.

The spreadsheet suitcase.

Table Rows with tr

Each row is created with tr.

Example:

<tr>
  <td>HTML</td>
  <td>Beginner</td>
</tr>

tr means table row.

A row goes horizontally.

Like this:

HTML | Beginner

A table is built row by row.

Not column by column.

This feels strange at first.

Then your brain accepts it.

Eventually.

Header Cells with th

Header cells use th.

Example:

<th>Course</th>
<th>Level</th>

Header cells describe what the data means.

Example:

<tr>
  <th>Course</th>
  <th>Level</th>
</tr>

This tells the browser:

These cells are headings for the table data.

Browsers usually show th text in bold and centered.

But again, the meaning is more important than the style.

HTML is not just decoration.

HTML is meaning with angle brackets.

Data Cells with td

Normal table cells use td.

Example:

<td>HTML</td>
<td>Beginner</td>

td means table data.

A row with data looks like this:

<tr>
  <td>HTML</td>
  <td>Beginner</td>
</tr>

Use td for actual data.

Use th for headings.

Do not mix them randomly like socks after laundry.

Add a Caption

A table can have a caption.

Example:

<table>
  <caption>Course Levels</caption>
  <tr>
    <th>Course</th>
    <th>Level</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>Beginner</td>
  </tr>
</table>

The caption describes the table.

It should be placed immediately after the opening table tag.

Good captions help users understand what the table is about.

This is especially useful for accessibility.

And also for humans who do not enjoy guessing games.

A Better Table Structure

For bigger tables, HTML gives us:

• thead;
• tbody;
• tfoot.

Example:

<table>
  <caption>Monthly Expenses</caption>

  <thead>
    <tr>
      <th>Item</th>
      <th>Cost</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Hosting</td>
      <td>€10</td>
    </tr>
    <tr>
      <td>Domain</td>
      <td>€12</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th>Total</th>
      <td>€22</td>
    </tr>
  </tfoot>
</table>

This structure makes the table clearer.

The table has:

• a header area;
• a body area;
• a footer area.

Very organized.

Almost suspiciously organized.

thead

The thead element contains the header section of the table.

Example:

<thead>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
</thead>

This is where column headings usually go.

It helps browsers, screen readers, and developers understand the table structure.

It also helps future you.

Future you appreciates clean code.

Future you is tired.

tbody

The tbody element contains the main table data.

Example:

<tbody>
  <tr>
    <td>Laptop</td>
    <td>€800</td>
  </tr>
  <tr>
    <td>Mouse</td>
    <td>€20</td>
  </tr>
</tbody>

This is where most rows usually live.

If the table is a sandwich, tbody is the filling.

The useful part.

The reason we are here.

tfoot

The tfoot element contains footer information.

Example:

<tfoot>
  <tr>
    <th>Total</th>
    <td>€820</td>
  </tr>
</tfoot>

Use it for totals, summaries, or final table information.

Not every table needs tfoot.

Use it when it helps.

Do not add tags just because they look professional.

That is how websites become soup.

Create a Table Practice Page

Create a new file:

touch tables.html

Add this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tables Practice</title>
</head>
<body>
  <h1>Tables Practice</h1>

  <p>This page shows a simple table with course information.</p>

  <table>
    <caption>Course Plan</caption>

    <thead>
      <tr>
        <th>Lesson</th>
        <th>Topic</th>
        <th>Status</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>1</td>
        <td>Getting Started</td>
        <td>Done</td>
      </tr>
      <tr>
        <td>2</td>
        <td>HTML Structure</td>
        <td>Done</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Text and Headings</td>
        <td>Done</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Open it in your browser.

It will look simple.

That is normal.

HTML creates the structure.

CSS will make it beautiful later.

For now, the table is alive.

Plain, but alive.

Do Not Use Tables for Layout

This is important.

Tables should not be used to build page layout.

Bad idea:

<table>
  <tr>
    <td>Sidebar</td>
    <td>Main Content</td>
  </tr>
</table>

This was common long ago.

But today we use CSS for layout.

Tables are for data.

CSS is for layout.

Do not make tables carry furniture.

They are not moving trucks.

When to Use a Table

Use a table when the content has clear rows and columns.

Good table use:

Product | Price | Quantity
Laptop  | €800  | 1
Mouse   | €20   | 2

Not a good table use:

Header | Main area | Footer

That is layout.

Use CSS later.

Be strict here.

Future projects will thank you.

Table Accessibility

Tables should be clear for everyone.

Use:

• meaningful headings;
• caption;
• simple structure;
• logical row and column organization.

Example:

<table>
  <caption>Weekly Training Schedule</caption>
  <thead>
    <tr>
      <th>Day</th>
      <th>Activity</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Monday</td>
      <td>Karate</td>
      <td>19:00</td>
    </tr>
    <tr>
      <td>Wednesday</td>
      <td>Yoga</td>
      <td>18:30</td>
    </tr>
  </tbody>
</table>

This is readable.

This is meaningful.

This does not make the browser cry quietly.

Common Mistakes

Forgetting tr

Wrong:

<table>
  <td>HTML</td>
  <td>Beginner</td>
</table>

Correct:

<table>
  <tr>
    <td>HTML</td>
    <td>Beginner</td>
  </tr>
</table>

Cells must be inside rows.

Rows must be inside the table.

Hierarchy matters.

HTML is not a pile of laundry.

Using td for Headers

Not ideal:

<tr>
  <td>Name</td>
  <td>Email</td>
</tr>

Better:

<tr>
  <th>Name</th>
  <th>Email</th>
</tr>

If it is a heading, use th.

Too Much Data

A giant table can be hard to read.

Do not create a table with 40 columns and then act surprised when users suffer.

If the table becomes too big, think about splitting it.

Or organizing the data differently.

Sometimes the best table is a smaller table.

Like pizza.

Smaller pieces are easier to survive.

Practice

Create a page called:

schedule.html

Build a table for a weekly schedule.

It should include:

• one h1;
• one paragraph introduction;
• one table;
• one caption;
• thead;
• tbody;
• at least five rows;
• columns for day, activity, and time.

No CSS.

No JavaScript.

Only HTML table structure.

Mini Challenge

Create a file:

price-list.html

Build a price list table.

It should include:

• a page title;
• a heading;
• a short paragraph;
• a table caption;
• columns for service, description, and price;
• at least four services;
• a footer row with a note or total.

Example services:

• landing page;
• portfolio website;
• business website;
• website maintenance.

Keep it clean.

No layout tricks.

Tables are for data.

We are watching them closely.

Summary

Today you learned:

• tables are for structured data;
• table creates a table;
• tr creates a table row;
• th creates a header cell;
• td creates a data cell;
• caption describes the table;
• thead groups header rows;
• tbody groups main data rows;
• tfoot groups footer rows;
• tables should not be used for page layout;
• good tables are clear, meaningful, and accessible.

Tables are useful when used correctly.

But if you use them for layout, somewhere a frontend developer spills coffee.

Next Lesson

In the next lesson, we’ll learn forms.

Forms are where users finally talk back to the website.

This is powerful.

And also where chaos likes to enter wearing sunglasses.