HTML Table TH – Table Header

Table columns represent different features of the data. To describe the data under a column, headers can be used. Headers are the string values that describe the data under it. Headers must be made bolder than the other content of the table.  HTML Table TH tag can be used to create headers for columns. TH Tag defines the header in such a way that there is a distinction between column heading text and the data content.

Syntax of Table TH tag

The Table TH tag must be specified in the first row of the table after row containing caption tag and must contain different strings that describe the respective columns.

<TABLE>
<TR>
<TH>Column Header</TH>
</TR>
</TABLE>

Features of Table TH Tag

  • TH is compulsorily a paired tag. An unpaired TH tag will lead to unexpected output. The table will not be rendered properly in the browser.
  • All Table TH tags for a table must be always enclosed in <TR> </TR> Tags.
  • Text contained in TH tags will be bold by default. It will be vertically and horizontally centered.

Attributes of TH Tag

ID

This attribute helps a web designer to assign identification to a header of an HTML table. ID is alphanumeric string and must be unique for the entire web page containing the table. This ID can be used to manipulate the header in a script.

CLASS

This attribute is used to set a class defined in the style sheet to style table headers. The style sheet element specifies the consistent style for elements of same kind in a web page.

TITLE

Title attribute is used to set tooltip text for Table Header. When the user rests the mouse cursor on the Table Header, a value assigned to TITLE attribute appears in a small outlined box.

STYLE

Style attribute is used to add additional styling to headers of a table. You can set styles in a string with CSS element and value pairs separated by semicolons. This includes font size and family, alignment of text, background color of the caption etc.

ALIGN

The table headers can be horizontally aligned using the ALIGN attribute. ALIGN attribute take any one value from LEFT, RIGHT, or CENTER. By default headers will be aligned to the left.

BGCOLOR

Each header of the table can be given a separate background color. BGCOLOR attribute can be assigned a color by name or by its hexadecimal color code.

HEIGHT

The HEIGHT attribute of the HTML Table TH tag will set the height of the header in pixels or the % of the container element. If you set height of one header element of a table row, all other headers will take the same height.

WIDTH

The width attribute of the HTML Table TH tag will set the width of the header in pixels or the % of the container element. If you set width of one header element of a table row, width of other headers will not be affected.

ROWSPAN

The ROWSPAN attribute of Table TH tag will define how many rows the header will span.

COLSPAN

The COLSPAN Attribute of Table TH tag will define how many columns the header will span.

BACKGROUND

The background attribute of HTML table TH is used to render an image as the background of the header. Portion of the image according to the height and width of the header element will be visible.

Table TH Tag Output