Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How do we specify whether a header cell is a header for a column, row, or group of columns or rows in HTML?
The scope attribute in HTML specifies whether a header cell (<th>) is a header for a column, row, or group of columns or rows. This attribute improves table accessibility by helping screen readers understand the relationship between header cells and data cells.
Syntax
Following is the syntax for the scope attribute −
<th scope="value">Header Content</th>
The value can be col, row, colgroup, or rowgroup.
Scope Attribute Values
The scope attribute accepts the following values −
col − Specifies that the header cell is a header for a column.
row − Specifies that the header cell is a header for a row.
colgroup − Specifies that the header cell is a header for a group of columns.
rowgroup − Specifies that the header cell is a header for a group of rows.
Using scope="col" for Column Headers
The scope="col" value indicates that the header cell applies to all cells in the same column below it.
Example
<!DOCTYPE html>
<html>
<head>
<title>Column Headers Example</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Student Information</h2>
<table style="width: 100%;">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Smith</td>
<td>A</td>
</tr>
<tr>
<td>2</td>
<td>Sarah Johnson</td>
<td>B+</td>
</tr>
</tbody>
</table>
</body>
</html>
The output displays a table with column headers that clearly define each column's purpose −
Student Information ID Name Grade 1 John Smith A 2 Sarah Johnson B+
Using scope="row" for Row Headers
The scope="row" value indicates that the header cell applies to all cells in the same row to its right.
Example
<!DOCTYPE html>
<html>
<head>
<title>Row Headers Example</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
}
th {
background-color: #e6f3ff;
font-weight: bold;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Monthly Sales Report</h2>
<table>
<tr>
<th></th>
<th scope="col">Q1</th>
<th scope="col">Q2</th>
<th scope="col">Q3</th>
</tr>
<tr>
<th scope="row">Product A</th>
<td>$10,000</td>
<td>$12,000</td>
<td>$15,000</td>
</tr>
<tr>
<th scope="row">Product B</th>
<td>$8,000</td>
<td>$9,500</td>
<td>$11,000</td>
</tr>
</table>
</body>
</html>
The output shows a table where each row header identifies the product, and column headers identify the quarters −
Monthly Sales Report
Q1 Q2 Q3
Product A $10,000 $12,000 $15,000
Product B $8,000 $9,500 $11,000
Using scope="colgroup" and scope="rowgroup"
The colgroup and rowgroup values are used when a header cell spans multiple columns or rows, typically with the colspan or rowspan attributes.
Example − Column Groups
<!DOCTYPE html>
<html>
<head>
<title>Column Groups Example</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: center;
}
th {
background-color: #f0f8ff;
font-weight: bold;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Annual Revenue Report</h2>
<table>
<tr>
<th></th>
<th scope="colgroup" colspan="2">2023</th>
<th scope="colgroup" colspan="2">2024</th>
</tr>
<tr>
<th></th>
<th scope="col">Q1</th>
<th scope="col">Q2</th>
<th scope="col">Q1</th>
<th scope="col">Q2</th>
</tr>
<tr>
<th scope="row">Sales</th>
<td>$50K</td>
<td>$60K</td>
<td>$65K</td>
<td>$75K</td>
</tr>
</table>
</body>
</html>
The output shows grouped headers spanning multiple columns −
Annual Revenue Report
2023 2024
Q1 Q2 Q1 Q2
Sales $50K $60K $65K $75K
167 Views
