HTML: <th> tag
This HTML tutorial explains how to use the HTML element called the <th> tag with syntax and examples.
Description
The HTML <th> tag defines a header cell that can appear in the first row of an HTML table. Browsers traditionally render the text found within the <th> tag as bold, center-aligned text. This tag is also commonly referred to as the <th> element.
Syntax
In HTML, the syntax for the <th> tag is: (example of a table where the first row contains the header cells)
<body>
<table>
<tr>
<th>Item</th>
<th>Amount</th>
</tr>
<tr>
<td>Apples</td>
<td>$15</td>
</tr>
</table>
</body>
Or, the <th> tag can be defined within the optional <thead> tag as follows: (which will be discussed more in the <thead> tag tutorial)
<body>
<table>
<thead>
<tr>
<th>Item</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apples</td>
<td>$15</td>
</tr>
</tbody>
</table>
</body>
Sample Output
Attributes
In addition to the Global Attributes, the following is a list of attributes that are specific to the <th> tag:
Attribute | Description | HTML Compatibility |
---|---|---|
abbr | Short description for contents of cell | Obsolete in HTML5 |
align | Horizontal alignment of text. It can be one of the following values: left, center, right, justify, char | Deprecated in HTML 4.01, Obsolete in HTML5, use CSS |
axis | List of strings, separated by spaces. Use scope attribute instead. | Obsolete in HTML5 |
bgcolor | Background color of cell | Non-standard, use CSS |
char | Set the character to align the cells in a column | Deprecated in HTML 4.01, Obsolete in HTML5 |
charoff | Number of characters to offset column data from the alignment characters (in char attribute) | Deprecated in HTML 4.01, Obsolete in HTML5 |
colspan | Number of columns the cell extends (Default is 1, max value is 1000) | HTML 4.01, HTML5 |
headers | List of strings (separated by spaces) corresponding to the id attribute of the <th> element that it applies to | HTML 4.01, HTML5 |
rowspan | Number of rows that the cell extends (Default is 1, max value is 65534) | HTML 4.01, HTML5 |
scope | List of strings, separated by spaces | Obsolete in HTML5 |
valign | Vertical alignment of text. It can be one of the following values: baseline, bottom, middle, top | Deprecated in HTML 4.01, Obsolete in HTML5, use CSS |
Note
- The HTML <th> element is found in an HTML table within the <body> tag.
- The <th> tag defines the header cells in the table which are displayed as bold, center-aligned text.
- The <th> tag is a header cell that can appear in the first row of an HTML table. The <th> tag can be defined within the <thead> tag, which has some browser advantages, but this is optional.
- The <tr> tag defines the table rows. There must be at least one row in the table.
- The <td> tag defines the standard cells in the table which are displayed as normal-weight, left-aligned text.
Browser Compatibility
The <th> tag is compatible with the following browsers:
- Chrome
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer (IE)
- Edge Mobile
- Opera
- Opera Mobile
- Safari (WebKit)
- Safari Mobile
Example
We will discuss the <th> tag below, exploring examples of how to use the <th> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.
Advertisements