HTML5: How to specify whether a header cell is a header for a column, row, or group of columns or rows ?

Last update on February 14 2024 12:55:57 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Define document type as HTML -->
<html><!-- Begin HTML document -->
<head><!-- Start of document header -->
<meta charset="utf-8"><!-- Define character encoding -->
<title>How to specify whether a header cell is a header for a column, row, or group of columns or rows</title><!-- Title of the HTML page -->
</head><!-- End of document header -->
<body><!-- Start of document body -->
<table width="200" border="1" cellpadding="2"><!-- Table element with width, border, and cell padding attributes -->
<tr><!-- Table row element -->
<th scope="col">Student Code</th><!-- Table header cell for "Student Code" scoped to a column -->
<th scope="col">Percentage of marks</th><!-- Table header cell for "Percentage of marks" scoped to a column -->
<th scope="col">Grade</th><!-- Table header cell for "Grade" scoped to a column -->
<th scope="col">Remarks</th><!-- Table header cell for "Remarks" scoped to a column -->
<tr><!-- End of table row -->
</tr><!-- End of table row (incorrectly placed, should be after the opening <tr> tag) -->
<td>S001</td><!-- Table data cell with content "S001" -->
<td>92</td><!-- Table data cell with content "92" -->
<td>A+</td><!-- Table data cell with content "A+" -->
<td>Excellent</td><!-- Table data cell with content "Excellent" -->
<tr><!-- Table row element -->
</tr><!-- End of table row -->
<td>S002</td><!-- Table data cell with content "S002" -->
<td>76</td><!-- Table data cell with content "76" -->
<td>B+</td><!-- Table data cell with content "B+" -->
<td>Good</td><!-- Table data cell with content "Good" -->
</tr><!-- End of table row -->
</table><!-- End of table -->
</body><!-- End of document body -->
</html><!-- End of HTML document -->

Explanation:

This HTML code defines a webpage with a table displaying student information.
The <table> tag creates a table structure with specific attributes such as width, border, and cell padding.
The <th> tags create header cells scoped to columns using the scope="col" attribute.
Each <tr> tag represents a row in the table, but the second and third <tr> tags are misplaced and should be inside the table row.
Each <td> tag represents a cell in the table containing data.

Live Demo:

See the Pen th-scope-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page