HTML Tables

Section 10: Tables, Captions, Headers, Spans and Accessible Data

HTML tables organize related information into rows and columns. They are useful for displaying employee records, course schedules, product comparisons, invoices, financial reports, examination results and other structured data.

In this lesson, you will learn how to create tables using semantic HTML, group table sections, identify row and column headers, merge cells using colspan and rowspan, and make tabular information accessible to people using assistive technologies.

1. Learning Objectives

By the end of this lesson, you will be able to:

Understand when an HTML table is appropriate.
Use table, tr, th and td correctly.
Add descriptive captions to tables.
Organize tables using thead, tbody and tfoot.
Distinguish header cells from ordinary data cells.
Use scope to identify row and column headers.
Merge cells horizontally using colspan.
Merge cells vertically using rowspan.
Understand colgroup and col for column-level structure and styling.
Use id and headers to associate cells in complex tables.
Apply accessible table practices and test table behavior.
Build practical data tables for real-world applications.

2. What Is an HTML Table?

An HTML table represents data arranged in rows and columns. Each cell belongs to a particular row and may contain either a heading or data.

The main HTML table elements are:

table: the container for tabular data.
caption: a title or description identifying the table.
tr: a table row.
th: a header cell.
td: a data cell.
thead: a group of header rows.
tbody: a group of body rows.
tfoot: a group of footer rows, often used for totals or summaries.
colgroup and col: elements for identifying columns and applying column-level presentation.

3. Your First HTML Table

Let's create a simple table displaying employee information.

Example

<table>
    <tr>
        <th>Employee ID</th>
        <th>Name</th>
        <th>Department</th>
    </tr>
    <tr>
        <td>101</td>
        <td>Rahul</td>
        <td>Development</td>
    </tr>
    <tr>
        <td>102</td>
        <td>Priya</td>
        <td>Testing</td>
    </tr>
</table>

The first row contains header cells, and the following rows contain employee data.

Browsers may apply default styling to header cells, but visual appearance alone does not determine the full accessibility of a table. Correct structure and relationships matter.

4. Understanding table, tr, th and td

The table Element

The table element contains the complete tabular structure. It should be used when information has meaningful relationships between rows and columns.

The tr Element

The tr element represents one row. It contains cells represented by th or td elements.

The th Element

The th element represents a header cell. It identifies a heading associated with one or more data cells.