HTML <th> tagS2C Home   « HTML <th> tag

Definition

The <th> tag is used to define a heading within a table and must be enclosed within the <tr></tr> element.

Example


<table>
  <tr>
    <th>Fruit</th>
    <th>Colour</th>
  </tr>
  <tr>
    <td>Banana</td>
    <td>Yellow</td>
  </tr>
  <tr>
    <td>Pea</td>
    <td>Green</td>
  </tr>
</table>

Required Attributes

NONE

Optional Attributes

axis no browser support - specifies a relationship between columns.

bgcolor this attribute is deprecated - use CSS instead.

char no browser support - specifies character to align cells to.

charoff no browser support - specifies offset of char character in pixels.

height this attribute is deprecated - use CSS instead.

nowrap this attribute is deprecated - use CSS instead.

width this attribute is deprecated - use CSS instead.

abbr specifies a shorter text description of the contents of a cell and can be utilized by screen readers.


<th abbr="someValue">Table header content</th>

align specifies the horizontal alignment of cell contents.


<th align="left">Table header content</th>   <!-- align content to the left -->
<th align="center">Table header content</th>   <!-- align content in the centre -->
<th align="right">Table header content</th>   <!-- align content to the right -->
<th align="justify">Table header content</th>   <!-- stretch contents to width -->
<th align="char">Table header content</th>   <!-- align content to a character -->

colspan specifies the number of columns a heading should span.


<th colspan="3">Table header content</th>

rowspan specifies the number of rows a heading should span.


<th rowspan="3">Table header content</th>

scope specifies a way to associate columns and rows with heading information.


<th scope="col">Table header content</th>   <!-- cell is a column header -->
<th scope="colgroup">Table header content</th>   <!-- cell is a column group header -->
<th scope="row">Table header content</th>   <!-- cell is a row header -->
<th scope="rowgroup">Table header content</th>   <!-- cell is a row group header -->

valign specifies the vertical alignment of cell contents.


<th valign="top">Table header content</th>   <!-- align content to the top -->
<th valign="middle">Table header content</th>   <!-- align content in the middle -->
<th valign="bottom">Table header content</th>   <!-- align content to the bottom -->
<th valign="baseline">Table header content</th>   <!-- align bottom for different fonts -->

Common Attributes

class - specifies a classname for the element allowing you to apply the style of the predefined class to the content.


<th class="classname">Table header content</th>

id - specifies a unique id for the element allowing you to apply the style of the predefined id to the content.


<th id="idname">Table header content</th>

style - specifies an inline style for the element allowing you to apply the style to the content.


<th style="color:red;text-align:left">Table header content</th>

title - specifies extra information about the content.


<th title="information about the content">Table header content</th>

Language Attributes

dir - specifies the directional flow of the content.


<!-- The text will flow from left to right -->
<th dir="ltr">Table header content</th>

<!-- The text will flow from right to left -->
<th dir="rtl">Table header content</th>

lang - specifies a language code for the content of the element.


<th lang="en">Table header content</th>

xml:lang - specifies a language code for the content of the element in XHTML documents.


<th xml:lang="fr">Table header content</th>

Document Event Attributes

NONE

Form Event Attributes

NONE

Image Event Attributes

NONE

Keyboard Event Attributes

onkeydown - The JavaScript code to be run when an element is in focus and keyboard key is pressed.


<!-- Executes the go() function -->
<th onkeydown="go()">Table header content</th>

onkeypress - The JavaScript code to be run when an element is in focus and keyboard key is pressed down and released.


<!-- Executes the go() function -->
<th onkeypress="go()">Table header content</th>

onkeyup - The JavaScript code to be run when an element is in focus and keyboard key is released.


<!-- Executes the go() function -->
<th onkeyup="go()">Table header content</th>

Mouse Event Attributes

onclick - The JavaScript code to be run when a mouse is clicked on the element.


<!-- Executes the go() function -->
<th onclick="go()">Table header content</th>

ondblclick - The JavaScript code to be run when a mouse is double clicked on the element.


<!-- Executes the go() function -->
<th ondblclick="go()">Table header content</th>

onmousedown - The JavaScript code to be run when the mouse button is pressed down while the cursor is over the element.


<!-- Executes the go() function -->
<th onmousedown="go()">Table header content</th>

onmousemove - The JavaScript code to be run when the mouse button is moved.


<!-- Executes the go() function -->
<th onmousemove="go()">Table header content</th>

onmouseout - The JavaScript code to be run when the mouse cursor moves off an element.


<!-- Executes the go() function -->
<th onmouseout="go()">Table header content</th>

onmouseover - The JavaScript code to be run when the mouse cursor moves over an element.


<!-- Executes the go() function -->
<th onmouseover="go()">Table header content</th>

onmouseup - The JavaScript code to be run when the mouse button is released while the cursor is over the element.


<!-- Executes the go() function -->
<th onmouseup="go()">Table header content</th>

go to home page Homepage go to top of page Top