<th>

HTML <th> Tag

Example

A simple HTML table, containing two columns and two rows:

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

The output of the code above will be:

Try it yourself

(more examples at the bottom of this page)

Definition and Usage

The <th> tag defines a header cell in an HTML table.

An HTML table has two kinds of cells:

Header cells - contains header information (created with the th element)
Standard cells - contains data (created with the td element)

The text in a th element is bold and centered.

The text in a td element is regular and left-aligned.

Browser Support

The <th> tag is supported in all major browsers

Differences Between HTML and XHTML

NONE

Tips and Notes

Tip: Use the colspan and rowspan attributes to let the content span over multiple columns or rows!

Optional Attributes

DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute	Value	Description	DTD
abbr	text	Specifies an abbreviated version of the content in a cell	STF
align	left right center justify char	Aligns the content in a cell	STF
axis	category_name	Categorizes cells	STF
bgcolor	rgb(x,x,x) #xxxxxx colorname	Deprecated. Use styles instead. Specifies a background color for a cell	TF
char	character	Aligns the content in a cell to a character	STF
charoff	number	Sets the number of characters the content will be aligned from the character specified by the char attribute	STF
colspan	number	Specifies the number of columns a cell should span	STF
height	pixels %	Deprecated. Use styles instead. Sets the height of a cell	TF
nowrap	nowrap	Deprecated. Use styles instead. Specifies that the content inside a cell should not wrap	TF
rowspan	number	Sets the number of rows a cell should span	STF
scope	col colgroup row rowgroup	Defines a way to associate header cells and data cells in a table	STF
valign	top middle bottom baseline	Vertical aligns the content in a cell	STF
width	pixels %	Deprecated. Use styles instead. Specifies the width of a cell	TF

Standard Attributes

Тег <th> поддерживает следующие стандартные атрибуты:

Attribute	Value	Description	DTD
class	classname	Specifies a classname for an element	STF
dir	rtl ltr	Specifies the text direction for the content in an element	STF
id	id	Specifies a unique id for an element	STF
lang	language_code	Specifies a language code for the content in an element	STF
style	style_definition	Specifies an inline style for an element	STF
title	text	Specifies extra information about an element	STF
xml:lang	language_code	Specifies a language code for the content in an element, in XHTML documents	STF

More information about Standard Attributes.

Event Attributes

The <th> tag supports the following event attributes:

Attribute	Value	Description	DTD
onclick	script	Script to be run on a mouse click	STF
ondblclick	script	Script to be run on a mouse double-click	STF
onmousedown	script	Script to be run when mouse button is pressed	STF
onmousemove	script	Script to be run when mouse pointer moves	STF
onmouseout	script	Script to be run when mouse pointer moves out of an element	STF
onmouseover	script	Script to be run when mouse pointer moves over an element	STF
onmouseup	script	Script to be run when mouse button is released	STF
onkeydown	script	Script to be run when a key is pressed	STF
onkeypress	script	Script to be run when a key is pressed and released	STF
onkeyup	script	Script to be run when a key is released	STF

More information about Event Attributes.

More Examples

Example 1

HTML tables with different borders.

<h4>Normal border:</h4>  
<table border="1">
  <tr>
    <td>First</td>
    <td>Row</td>
  </tr>   
  <tr>
    <td>Second</td>
    <td>Row</td>
  </tr>
</table>

<h4>No border:</h4>
<table border="0">
  <tr>
    <td>First</td>
    <td>Row</td>
  </tr>   
  <tr>
    <td>Second</td>
    <td>Row</td>
  </tr>
</table>

<h4>Thick border:</h4>  
<table border="8">
  <tr>
    <td>First</td>
    <td>Row</td>
  </tr>   
  <tr>
    <td>Second</td>
    <td>Row</td>
  </tr>
</table>

<h4>Very thick border:</h4>  
<table border="15">
  <tr>
    <td>First</td>
    <td>Row</td>
  </tr>   
  <tr>
    <td>Second</td>
    <td>Row</td>
  </tr>
</table>

The output of the code above will be:

Try it yourself

Example 2

How to create table headers.

<h4>Table headers:</h4>
<table border="1">
  <tr>
    <th>Name</th>
    <th>Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
  </tr>
</table>

<h4>Vertical headers:</h4>
<table border="1">
  <tr>
    <th>First Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th>Telephone:</th>
    <td>555 77 854</td>
  </tr>
</table>

The output of the code above will be:

Try it yourself

Example 3

How to use 'nbsp' to handle cells that have no content.

<table border="1">
<tr>
  <td>Some text</td>
  <td>Some text</td>
</tr>
<tr>
  <td></td>
  <td>Some text</td>
</tr>
</table>

The output of the code above will be:

Try it yourself

Example 4

An HTML table with a caption.

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

The output of the code above will be:

Try it yourself

Example 5

How to display elements inside other elements.

<table border="1">
<tr>
  <td>
   <p>This is a paragraph</p>
   <p>This is another paragraph</p>
  </td>
  <td>This cell contains a table:
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>This cell contains a list
   <ul>
    <li>apples</li>
    <li>bananas</li>
    <li>pineapples</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>

The output of the code above will be:

Try it yourself

Example 6

How to define table cells that span more than one row or one column.

<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

The output of the code above will be:

Try it yourself

Example 7

How to use cellpadding to create more white space between the cell content and its borders.

<h4>Without cellpadding:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With cellpadding:</h4>
<table border="1" 
cellpadding="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

The output of the code above will be:

Try it yourself

Example 8

How to use cellspacing to increase the distance between the cells.

<h4>Without cellspacing:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With cellspacing:</h4>
<table border="1" 
cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

The output of the code above will be:

Try it yourself

Example 9

How to add a background to a table.

<h4>A background color:</h4>
<table border="1" style="background-color:red">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>A background image:</h4>
<table border="1" style="background-image:url('http://xhtml.co.il/images/13-red-snapper-665.gif')">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

The output of the code above will be:

Try it yourself

Example 10

How to use the "frame" attribute to control the borders around the table.

<p>Table with frame="box":</p>
<table frame="box">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="above":</p>
<table frame="above">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="below":</p>
<table frame="below">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="hsides":</p>
<table frame="hsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="vsides":</p>
<table frame="vsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

The output of the code above will be:

Try it yourself

Was this information helpful?

Yes No

<th>

HTML <th> Tag

Example

Definition and Usage

Browser Support

Differences Between HTML and XHTML

Tips and Notes

Optional Attributes

Standard Attributes

Event Attributes

More Examples

Example 1

Example 2

Example 3

Example 4

Example 5

Example 6

Example 7

Example 8

Example 9

Example 10

Comments