HTML Table Scope Attribute Made Easy: A Complete Beginner's Guide

calender-iconPublished: 25 May 2025

clock-icon5-min read

printer-icon whatsapp-icon share-icon



close-button
HTML
Table of Contents

INTRODUCTION

The scope attribute in an HTML (table header) element specifies the set of cells the table header is associated with. It helps improve accessibility and semantics by clarifying whether the header applies to a row, column, or a group of cells. This attribute is used only with HTML <th> element.

Possible Values

The possible values of this attribute is listed below.

  • row
  • col
  • rowgroup
  • colgroup

If the scope attribute is not specified or set to an invalid value, browsers will automatically determine which cells the header applies to.



1. row

The header applies to all cells in the row it belongs to.

Example: 

<table>
    <tr>
        <th scope="row">John</th>
        <td>25</td>
        <td>USA</td>
    </tr>
    <tr>
        <th scope="row">Emma</th>
        <td>30</td>
        <td>UK</td>
    </tr>
</table>
John 25 USA
Emma 30 UK


2. col

The header applies to all cells in the column it belongs to.

Example: 

<table border="1">
    <tr>
        <th scope="col">Name</th>
        <th scope="col">Age</th>
        <th scope="col">Country</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
        <td>USA</td>
    </tr>
    <tr>
        <td>Emma</td>
        <td>30</td>
        <td>UK</td>
    </tr>
</table>
Name Age Country
John 25 USA
Emma 30 UK


3. rowgroup

The header applies to a group of rows and relates to all of its cells.

Example: 

<table>
    <thead>
        <tr>
            <th scope="col">Category</th>
            <th scope="col">Item</th>
            <th scope="col">Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="rowgroup" rowspan="2">Fruits</th>
            <td>Apple</td>
            <td>$2</td>
        </tr>
        <tr>
            <td>Banana</td>
            <td>$1</td>
        </tr>
        <tr>
            <th scope="rowgroup" rowspan="2">Vegetables</th>
            <td>Carrot</td>
            <td>$3</td>
        </tr>
        <tr>
            <td>Spinach</td>
            <td>$4</td>
        </tr>
    </tbody>
</table>
Category Item Price
Fruits Apple $2
Banana $1
Vegetables Carrot $3
Spinach $4


4. colgroup

The header applies to a group of columns and relates to all of its cells.

Example: 

<table border="1">
    <tr>
        <th scope="colgroup" colspan="2">Full name</th>
        <th scope="col">Country</th>
    </tr>
    <tr>
        <th scope="col">first Name</th>
        <th scope="col">Last name</th>
        
    </tr>
    <tr>
        <td>Emma</td>
        <td>watson</td>
        <td>UK</td>
    </tr>
</table>
Full name Country
first Name Last name
Emma watson UK

Frequently Asked Questions (FAQ)

What is the use of the scope attribute in HTML tables?
The scope attribute in an HTML (table header) element specifies the set of cells the table header is associated with. It helps improve accessibility and semantics by clarifying whether the header applies to a row, column, or a group of cells. This attribute is used only with HTML <th> element.

What possible values can the HTML table scope attribute take?

The possible values of this attribute is listed below.

  • row - The header applies to all cells in the row it belongs to.
  • col - The header applies to all cells in the column it belongs to.
  • rowgroup - The header applies to a group of rows and relates to all of its cells.
  • colgroup - The header applies to a group of columns and relates to all of its cells.

Do I still need to use the scope attribute if table headers are already in the first row or column?
The scope attribute on th elements in HTML tables is not strictly necessary for simple tables where headers are in the first row (scope="col") or first column (scope="row"), as modern screen readers can often infer these relationships. However, including scope is a best practice for accessibility to ensure clarity, compatibility with all assistive technologies, and future-proofing for table modifications.

In what way does the scope attribute enhance table accessibility for screen readers?
By clearly defining the relationship between header and data cells, the scope attribute allows screen readers to accurately convey table structures to users with visual impairments. This clarity facilitates easier navigation and understanding of table data.

Is it valid to apply the scope attribute to <td> elements?
No. The scope attribute is intended for use with <th> elements. Applying it to <td> elements is not standard practice and may not yield the desired accessibility benefits.

How do scope="col" and scope="colgroup" differ in HTML tables?
scope="col" indicates that the header applies to a single column.

scope="colgroup" signifies that the header applies to a group of columns, typically defined using the colgroup element.