HTML <th> Tag

The HTML <th> tag is an essential element used in tables to define header cells. It represents the header for a row or column within a table. The content inside a <th> element is typically bold and centered, helping users easily identify what each row or column in the table represents. Proper use of the <th> tag improves both the structure and accessibility of your HTML tables, making them easier to understand for users and screen readers.

Syntax of the <th> Tag

html
<th>Header Content</th>

The <th> tag is usually placed inside a <tr> (table row) element. The header cells defined using the <th> tag can apply to both rows and columns in the table, depending on its usage.

Here’s an example showing how the <th> tag is used within a table structure:

html
<table>
    <tr>
        <th>Column Header 1</th>
        <th>Column Header 2</th>
    </tr>
</table>

Attributes of the <th> Tag

The <th> tag supports several attributes that help define the scope, alignment, and style of the header cells. These attributes not only improve the table’s visual appeal but also enhance its functionality.

AttributeDescription
scopeDefines whether the header applies to a row or column. Values can be row, col, rowgroup, or colgroup.
colspanSpecifies the number of columns that the header cell should span across.
rowspanSpecifies the number of rows that the header cell should span across.
headersAssociates the header cell with one or more cells in the table using the id of the related <td> element.
global attributesSupports global attributes like class,id,style,lang, and title for customization and styling.

Example of the scope Attribute

html
<th scope="col">Product Name</th>
<th scope="row">Price</th>

In this example, the scope attribute helps browsers and screen readers understand whether the header applies to the row or column, improving accessibility.

Examples of HTML <th> Tag

Example 1: Defining Column Headers

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Header Example</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Quantity</th>
        </tr>
        <tr>
            <td>Apples</td>
            <td>$2</td>
            <td>5</td>
        </tr>
        <tr>
            <td>Bananas</td>
            <td>$1</td>
            <td>8</td>
        </tr>
    </table>
</body>
</html>

In this example, the <th> tag defines the column headers for "Product", "Price", and "Quantity".

Example 2: Using colspan Attribute

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colspan Example</title>
</head>
<body>
    <table border="1">
        <tr>
            <th colspan="2">Product Information</th>
        </tr>
        <tr>
            <th>Product</th>
            <th>Price</th>
        </tr>
        <tr>
            <td>Apples</td>
            <td>$2</td>
        </tr>
    </table>
</body>
</html>

Here, the <th> element with colspan="2" spans two columns, creating a header that covers both the "Product" and "Price" columns in the row below it.

FAQs About HTML <th>Tag

Q1: What is the purpose of the HTML <th> tag?
A: The <th> tag defines a header cell in an HTML table. It is used to indicate the title of a row or column, typically rendered in bold text to differentiate it from data cells.

Q2: Does the <th> tag improve accessibility?
A: Yes, the <th> tag improves accessibility by clearly defining headers for screen readers, especially when combined with the scope attribute, which specifies whether the header refers to rows or columns.

Q3: Can the <th> tag span multiple rows or columns?
A: Yes, the <th> tag can span multiple rows or columns using the rowspan and colspan attributes, making it versatile for complex table structures.

Q4: How does the <th> tag impact SEO?
A: The <th> tag enhances the structure of the table, which can improve user experience and accessibility—both of which are factors considered by search engines in SEO rankings.

Q5: What is the difference between <th> and <td> tags?
A: The <th> tag is used for header cells, which define the title or purpose of a column or row. The <td> tag is used for regular data cells within the table.

tools

HTML

Related Articles