Understanding the TH Tag In HTML5

In HTML5
3 min read

The <th> HTML tag is used to define table header cells that contain column headers or row headers. These headers are typically bolded and centered by default and can be styled further using CSS.

Example Usage:

<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
</table>

Attributes applicable to the tag:

  • scope: Specifies whether the header cell is a column header or row header. Valid values are “col” for the column header and “row” for the row header. Example: <th scope="col">Column 1</th>
  • abbr: Provides an abbreviated form of the header text. Example: <th abbr="Price">Price (in USD)</th>
  • headers: Specifies that the cell is related to other cells in the table. Example: <th headers="header1 header2">Header for column 1 and 2</th>
  • id: Assigns a unique identifier to the element. Example: <th id="header1">Column 1</th>
  • class: Assigns a class name or set of class names to the element. Example: <th class="header-cell">Column 1</th>
  • style: Applies inline styles to the element. Example: <th style="font-weight: bold; text-align: center;">Column 1</th>
  • axis: Specifies the axis of the table cell. Valid values are “y” for row headers and “x” for column headers. Example: <th axis="y">Row Header</th>
  • colspan: Specifies the number of columns the current cell should span across. Example: <th colspan="2">Header for Column 1 and 2</th>
  • rowspan: Specifies the number of rows the current cell should span across. Example: <th rowspan="2">Header for Row 1 and 2</th>
  • valign: Specifies the vertical alignment of text within a table cell. Valid values are “top,” “middle,” “bottom,” or “baseline.” Example: <th valign="middle">Column 1</th>
  • align: Specifies the horizontal alignment of text within a table cell. Valid values are “left,” “right,” “center,” or “justify.” Example: <th align="center">Column 1</th>

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from Carlos Baez

Subscribe now to keep reading and get access to the full archive.

Continue Reading