Home Blog Contact

Web Design Tutorial — Lesson 21 of 27 [ Updated: 11 Aug 2026 ]

HTML Tables Explained for Beginners – Rows, Columns & Headers

Learning Objectives

After completing this tutorial, you will be able to:

  • Understand how HTML tables work.

  • Create table rows and columns.

  • Use table headers and data cells.

  • Build a simple data table.

  • Structure tables correctly.

  • Avoid common beginner mistakes.

Table of Contents

  1. Introduction

  2. What Is an HTML Table?

  3. Basic Table Structure

  4. Creating Table Rows

  5. Creating Table Headers

  6. Creating Table Data

  7. Building Your First Table

  8. Adding a Table Caption

  9. Real-World Example

  10. Best Practices

  11. Common Beginner Mistakes

  12. Practice Exercise

  13. Assignment

  14. Summary

  15. Frequently Asked Questions

  16. Next Tutorial

Introduction

Websites often need to display information in a structured format.

For example:

  • Student results

  • Product prices

  • Employee information

  • Course schedules

  • Monthly statistics

  • Comparison data

A paragraph would make this information difficult to read.

HTML tables allow you to organize related information into rows and columns.

For example:

Student Course Score
John HTML 85
Sarah CSS 92
David JavaScript 88

HTML provides several elements to create this structure.

What Is an HTML Table?

An HTML table is created using the <table> element.

Inside a table, you normally use:

<table> → Defines the table
<tr>    → Defines a table row
<th>    → Defines a table header cell
<td>    → Defines a table data cell

Think of the structure like this:

Table
 ├── Row
 │    ├── Header
 │    ├── Header
 │    └── Header
 │
 ├── Row
 │    ├── Data
 │    ├── Data
 │    └── Data

Once you understand this structure, creating tables becomes much easier.

Basic Table Structure

Here is the simplest table:

<table>

    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>

    <tr>
        <td>John</td>
        <td>25</td>
    </tr>

</table>

Let's understand each element.

Creating Table Rows

The <tr> element represents a table row.

tr means:

Table Row

Example:

<tr>
    <td>John</td>
    <td>25</td>
</tr>

This creates one row containing two cells.

A table can contain many rows.

<tr>
    <td>John</td>
    <td>25</td>
</tr>

<tr>
    <td>Sarah</td>
    <td>22</td>
</tr>

Each <tr> represents another row.

Creating Table Headers

The <th> element creates a table header cell.

th means:

Table Header

Example:

<tr>
    <th>Name</th>
    <th>Age</th>
    <th>Country</th>
</tr>

These cells describe the information underneath them.

Browsers usually display table headers in bold text by default.

Creating Table Data

The <td> element creates a normal table data cell.

td means:

Table Data

Example:

<tr>
    <td>John</td>
    <td>25</td>
    <td>Bangladesh</td>
</tr>

Each <td> represents one piece of data.

Building Your First Table

Let's create a student result table.

<table>

    <tr>
        <th>Student</th>
        <th>Subject</th>
        <th>Score</th>
    </tr>

    <tr>
        <td>John</td>
        <td>HTML</td>
        <td>85</td>
    </tr>

    <tr>
        <td>Sarah</td>
        <td>CSS</td>
        <td>92</td>
    </tr>

    <tr>
        <td>David</td>
        <td>JavaScript</td>
        <td>88</td>
    </tr>

</table>

The structure is:

Student     Subject       Score
John        HTML          85
Sarah       CSS           92
David       JavaScript    88

This is a basic but properly structured HTML table.

Adding a Table Caption

The <caption> element provides a title or description for a table.

Example:

<table>

    <caption>Student Results</caption>

    <tr>
        <th>Name</th>
        <th>Score</th>
    </tr>

    <tr>
        <td>John</td>
        <td>85</td>
    </tr>

    <tr>
        <td>Sarah</td>
        <td>92</td>
    </tr>

</table>

The caption helps users understand what the table represents.

It is especially useful for accessibility and structured content.

Real-World Example

Imagine you're building a pricing page for a web hosting service.

A table could display:

<table>

    <caption>Hosting Plans</caption>

    <tr>
        <th>Plan</th>
        <th>Storage</th>
        <th>Price</th>
    </tr>

    <tr>
        <td>Basic</td>
        <td>10 GB</td>
        <td>$5/month</td>
    </tr>

    <tr>
        <td>Pro</td>
        <td>50 GB</td>
        <td>$10/month</td>
    </tr>

    <tr>
        <td>Business</td>
        <td>100 GB</td>
        <td>$20/month</td>
    </tr>

</table>

This is a practical use of tables because the information naturally belongs in rows and columns.

Tables Are for Data, Not Page Layout

This is an important concept for beginners.

Older websites sometimes used tables to create the entire page layout.

Modern web development does not use tables for general page layout.

Tables should be used for tabular data.

Good use:

Product | Price | Stock

Bad use:

Using a table to position a logo, navigation menu,
sidebar, and footer.

For page layout, you'll later learn:

  • CSS

  • Flexbox

  • CSS Grid

These are the correct tools for building modern layouts.

Best Practices

Use <th> for headers

Don't use <td> for cells that are actually headers.

Good:

<th>Product</th>
<th>Price</th>

Keep columns logically related

Each column should represent one type of information.

For example:

Product | Price | Quantity

is clear and logical.

Add a caption when appropriate

A caption gives the table context.

<caption>Monthly Sales Report</caption>

Common Beginner Mistakes

Mistake 1: Forgetting <tr>

Incorrect:

<table>
    <th>Name</th>
    <th>Age</th>
</table>

A proper table should organize cells inside rows.

Correct:

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
</table>

Mistake 2: Mixing the structure randomly

Avoid creating table cells outside a row.

Correct structure:

<table>
    <tr>
        <th>...</th>
        <th>...</th>
    </tr>
</table>

Mistake 3: Using tables for layout

Don't use tables to position elements around your website.

Tables are for data.

Practice Exercise

Create a simple employee table.

<table>

    <caption>Employee Information</caption>

    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Department</th>
    </tr>

    <tr>
        <td>John</td>
        <td>Designer</td>
        <td>Creative</td>
    </tr>

    <tr>
        <td>Sarah</td>
        <td>Developer</td>
        <td>Technology</td>
    </tr>

</table>

Open the page in your browser and inspect the structure.

Assignment

Create a Student Result Table.

Your table should contain:

  • A caption

  • 3 headers

  • At least 4 students

  • Student names

  • Subjects

  • Scores

Example structure:

Student | Subject | Score

Try creating the complete HTML without looking at the example above.

This is an important step because writing the structure yourself helps you remember the syntax.

Summary

In this tutorial, you learned how HTML tables organize information into rows and columns.

The main elements are:

<table> → Table
<tr>    → Row
<th>    → Header cell
<td>    → Data cell
<caption> → Table description

You also learned an important professional rule:

Use tables for tabular data, not for website layout.

Later, you'll use CSS to make your tables look professional and responsive.

Frequently Asked Questions

What does <tr> mean?

<tr> means Table Row.

What does <th> mean?

<th> creates a table header cell.

What does <td> mean?

<td> creates a normal data cell.

Can tables contain links?

Yes.

For example:

<td>
    <a href="profile.html">View Profile</a>
</td>

Can CSS style HTML tables?

Yes. CSS can control borders, spacing, colors, alignment, responsive behavior, and much more.

Next Tutorial

HTML Table Structure – thead, tbody, and tfoot

In the next tutorial, you'll learn how to organize larger tables using <thead>, <tbody>, and <tfoot>. This will help you write cleaner, more semantic HTML before moving deeper into forms and page structure.

← Previous Next →