HTML <th> th tag
The <th> tag in HTML is used to define a table header cell within a table. It represents a cell in a table that contains header information, typically used to label columns or rows in a table.
Key Features:
- Header Cells: Defines cells that serve as headers for columns or rows, providing context for the data contained in the table.
- Bold and Centered Text: By default, text within
<th>elements is bold and centered, distinguishing it from regular table data cells (<td>). - Semantic Meaning: Enhances the semantic structure of the table by indicating which cells contain header information.
Basic Syntax:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
In this example:
- The
<th>tags define header cells in the first row of the table. - They label the columns for the subsequent rows of data.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TH Tag Example</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f4f4f4;
text-align: center;
}
</style>
</head>
<body>
<h1>Table with TH Example</h1>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>25</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Carol</td>
<td>28</td>
<td>Chicago</td>
</tr>
</tbody>
</table>
</body>
</html>
In this example:
- The
<th>elements in the<thead>section define the headers for the table columns: Name, Age, and City.
Attributes:
rowspan: Specifies the number of rows a header cell should span. For example,<th rowspan="2">makes the header cell span two rows.colspan: Specifies the number of columns a header cell should span. For example,<th colspan="2">makes the header cell span two columns.scope: Defines the scope of the header cell. It can be set tocol,row,colgroup, orrowgroup. This helps assistive technologies understand the relationship between header cells and data cells.
Example with Attributes:
<table>
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Details</th>
</tr>
<tr>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Alice</td>
<td>30</td>
<td>New York</td>
</tr>
</table>
In this example:
- The
<th>withrowspan="2"spans two rows, and the<th>withcolspan="2"spans two columns.
Use Cases:
- Column and Row Headers: Use
<th>to label columns or rows, providing context for the data within the table. - Accessibility: Improves table accessibility by indicating which cells are headers, helping screen readers and other assistive technologies.
Best Practices:
- Consistent Usage: Use
<th>consistently to define headers and provide context for table data. - Styling: Style
<th>elements to visually distinguish headers from data cells, using CSS for better presentation. - Scope Attribute: Use the
scopeattribute to improve accessibility by explicitly defining the header's role.
Key Points:
- Purpose: The
<th>tag defines header cells in a table, providing context for the table's data. - Default Style: Text within
<th>elements is bold and centered by default. - Attributes:
rowspan,colspan, andscopehelp control the layout and accessibility of header cells.
In summary, the <th> tag in HTML is essential for creating table headers, providing clear labels for table columns or rows, and enhancing the table's semantic structure and accessibility. It helps in organizing table data effectively and ensures that header information is properly identified and styled.