HTML <th> Tag for Table Column Headings

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

The <th> Tag in HTML 5

The `<th>` tag for table heading cells

The <th> table heading cell tag divides a table row into individual cells, like the <td> table detail cell tag, but is used for headings in a table. A column heading is usually included above a column in a table and can span multiple columns of the table, but other headings may appear elsewhere, such as the row headings in the example HTML table below. The style of a heading may be different from the rest of the cells in the same column or row - for example, by default the text is centered. In the table example below, there are three column headings and two row headings created by the <th> tag.

HTML <table> Demo

Table Caption
	→Multiple Column Heading←
	→First Column Heading←	→Second Column Heading←
This is an example of an HTML table footer.
→Row 1←	Row 1 Column 1	Row 1 Column 2
→Row 2←	Row 2 Column 1	Row 2 Column 2

This is an actual working demo of the table heading example code below. (Do View Source to verify that this page is using the HTML 5 DOCTYPE. You can also verify it is Valid HTML 5 using the HTML Validator. Try using it to validate URLs with HTML examples from other places that claim to be HTML 5 web sites!)

The <th> tag is similar to the <td> tag in that both can be used within a tr element. One important difference, however, is that while the <td> tag is one of the sectioning root tags, which starts a new section outline for the content of the td element, the <th> tag is not and therefore contributes to the same section outline as its ancestors.

See the tutorial on Creating HTML Tables for full details on how to create an HTML table using the HTML table tags together.

<th> Tag Syntax

<body>
   ... flow content expected ...
   <table>
      <thead>
         <tr>
            <th colspan="n">...</th>
            ...
         </tr>
         <tr>
            <th>...</th>
            ...
         </tr>
         ...
      </thead>
      <tbody>
         ...
      </tbody>
   </table>
   ...
</body>

Rules for coding the HTML `th` element

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

Inside a tr element code one or more th elements, one for each heading cell in the row.
Begin the element for each heading cell with a starting <th> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
Include any attributes of the <th> tag as appropriate.The colspan attribute and rowspan attribute allow merging cells from multiple heading columns and/or rows.
End the th element with a matching </th> closing tag. (To ensure tags match up properly, it helps to code the starting and ending tags first, then fill in between them.)
Between the <th> starting tag and the </th> ending tag include the inner HTML flow content for the heading.
Code separate th elements for any additional headings in the same table row before the </tr> tag for the end of the row.

<th> Tag Attributes

Attributes of the <th> tag

global attributes	In addition to the personal attributes of the <th> tag below, any of the common HTML attributes can also be coded.
colspan	merges the cells from the specified number of columns into a single cell
rowspan	merges the cells from the specified number of rows into a single cell
headers	a list of references to the `id` attribute of <th> headings applicable to the cell, separated by spaces if more than one This might be used when some columns of the table are grouped under higher level headings. The individual column headings can reference the higher level heading groups, which would probably span multiple columns.
`scope="col"` `scope="row"` `scope="colgroup"` `scope="rowgroup"`

<th> Tag Examples

Examples of the `th` tag in HTML 5

Here is the HTML code for the HTML table demo above:

<table>
   <caption>Table Caption</caption>
   <colgroup>
      <col style="width: 20%"/>
      <col style="width: 80%"/>
   </colgroup>
   <thead>
      <tr>
         <th rowspan="2"></th>
         <th colspan="2">Multiple Column Heading</th>
      </tr>
      <tr style="vertical-align: bottom">
         <th>First Column Heading</th>
         <th>Second Column Heading</th>
      </tr>
   </thead>
   <tfoot>
      <tr><td colspan="2">This is an example of an HTML table footer.</td></tr>
   </tfoot>
   <tbody>
      <tr>
         <td>Row 1 Column 1</td>
         <td>Row 1 Column 2</td>
      </tr>
      <tr>
         <td>Row 2 Column 1</td>
         <td>Row 2 Column 2</td>
      </tr>
   </tbody>
</table>

Changes in HTML 5 - <th> Tag

What's new in HTML 5

Differences between HTML 5 and earlier versions of HTML

The following attributes should not be coded on the <th> tag because they either have been deprecated or were never officially supported:

abbr
align
axis
bgcolor
char
charoff
height
nowrap
scope
valign
width

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the th element type name along with the names of all HTML element types. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

Valid HTML 5