HTML Tables Tutorial: 7 Essential Concepts with Examples (Tutorial 4)

Welcome to this HTML tables tutorial. Tables are used to display structured, tabular data — pricing plans, schedules, comparison charts, and more.

This is Tutorial 4 of 8 in our complete HTML series on Tutorials Ocean’s HTML category. If you missed it, check out Tutorial 3: Links, Images & Media first.

Basic Table Structure

Every HTML tables tutorial starts with the same three core tags: table, tr, and td.

<table border="1">
    <tr>
        <td>Name</td>
        <td>Course</td>
    </tr>
    <tr>
        <td>Ali</td>
        <td>Web Development</td>
    </tr>
</table>

Table Headers with th

Instead of using <td> for header cells, use <th>. It’s bold and centered by default, and it carries semantic meaning for screen readers.

<table border="1">
    <tr>
        <th>Name</th>
        <th>Course</th>
    </tr>
    <tr>
        <td>Ali</td>
        <td>Web Development</td>
    </tr>
</table>

This small change matters a lot in accessibility — a proper HTML tables tutorial should never skip <th>.

Structuring Tables: thead, tbody, tfoot

For larger, real-world tables, it’s best practice to group your rows properly.

<table border="1">
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Course A</td>
            <td>$20</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>$20</td>
        </tr>
    </tfoot>
</table>

• <thead> — groups header rows
• <tbody> — groups the main data rows
• <tfoot> — groups footer/summary rows

Merging Cells: rowspan & colspan

Sometimes one cell needs to stretch across multiple rows or columns. This is the part most beginners find tricky in any HTML tables tutorial.

<table border="1">
    <tr>
        <th>Day</th>
        <th colspan="2">Classes</th>
    </tr>
    <tr>
        <td rowspan="2">Monday</td>
        <td>HTML</td>
        <td>9 AM</td>
    </tr>
    <tr>
        <td>CSS</td>
        <td>11 AM</td>
    </tr>
</table>

colspan merges cells horizontally (across columns). rowspan merges cells vertically (across rows). Both take a number value telling how many cells to merge.

For the complete official reference, check the MDN documentation on HTML tables.

Adding a Caption

Use <caption> to give your table a title. It’s placed right after the opening <table> tag.

<table border="1">
    <caption>Weekly Class Schedule</caption>
    <tr>
        <th>Day</th>
        <th>Class</th>
    </tr>
</table>

Practice Exercise

Open your index.html file from Tutorial 3 and add a new “Schedule” section.

Requirements:

1. Add an <h2> titled “My Weekly Schedule”
2. Create a table with a <caption>
3. Use <thead> with proper <th> column headers (Day, Subject, Time)
4. Add at least 3 rows of data inside <tbody>
5. Use rowspan at least once, where two classes happen on the same day

Bonus challenge: Add a <tfoot> row showing “Total Classes This Week” with the count.

Save your file, refresh your browser, and check that your merged cells look correct.

What’s Next?

This completes Tutorial 4 of our HTML tables tutorial series. In Tutorial 5, we’ll cover HTML forms — input fields, labels, and validation attributes, one of the most searched HTML topics.

This HTML tables tutorial is part of the complete HTML series on Tutorials Ocean — practical, beginner-friendly web development tutorials. Follow along and build real projects as you learn.