HTML Tag Reference - HTML tag <th>

This <th> element creates a single cell as a table heading. The text in this element appears in bold and is aligned to the center by default.

Browser compatibility


`<th>`	Yes	Yes	Yes	Yes	Yes

What's new in HTML5

All layout attributes are deprecated in HTML5.

Attribute

Attribute	Value	Description
abbr	text	Set an abbreviated for the header cell content
align	left right center justify char	Not supported in HTML5. Align the header cell content
axis	category_name	Not supported in HTML5. Categorizes header cells
bgcolor	rgb(x,x,x) #xxxxxx colorname	Not supported in HTML5. Set the header cell background color
char	character	Not supported in HTML5. Align the header cell content to a character
charoff	number	Not supported in HTML5. Sets the number of characters to align the content from the character in the char attribute
colspan	number	Set the number of columns a header cell should span
headers	header_id	Set one or more header cells a cell is related to
height	pixels %	Not supported in HTML5. Sets the header cell height
nowrap	nowrap	Not supported in HTML5. Set not to wrap header cell the content
rowspan	number	Set the number of rows a header cell should span
scope	col colgroup row rowgroup	Set header cell scope
sorted	reversed number reversed number number reversed	the sort direction of a column
valign	top middle bottom baseline	Not supported in HTML5. Vertical aligns the header cell content
width	pixels %	Not supported in HTML5. Set the header cell width

Global Attributes

The <th> tag supports the Global Attributes in HTML.

Event Attributes

The <th> tag supports the Event Attributes in HTML.

Default CSS Settings

th {
    display: table-cell;
    vertical-align: inherit;
    font-weight: bold;
    text-align: center;
}

Example

<html>
<body>
     <table border="1">
          <tr>
               <th colspan="3">Bold and centered text</th>
          </tr>
          <tr>
               <td>first column</td>
               <td>second column</td>
               <td>third column</td>
          </tr>
     </table>
</body><!--   w w  w. j a  v a2  s  .  c o m-->
</html>

Click to view the demo

Associating Headers with Cells

The headers attribute from td and th elements can be used to make tables easier to process with screen readers. The value of the headers attribute is the ID attribute value of one or more th cells.

<!DOCTYPE HTML> 
<html> 
<head> 
<style> 
thead th{ text-align:left; background:grey; color:white} 
tbody th { text-align:right; background: lightgrey; color:grey} 
</style> <!--from ww w  .  j  a  va  2s  .c  om-->
</head> 
<body> 
    <table> 
        <thead> 
            <tr> 
               <th id="rank">Rank</th><th id="name">Name</th><th id="color">Color</th> 
            </tr> 
        </thead> 
        <tbody> 
            <tr> 
                <th id="first" headers="rank">Favorite:</th><td headers="name first">Apples</td><td headers="color first">Green</td> 
            </tr> 
        <tr> 
            <th id="second" headers="rank">2nd Favorite:</th><td headers="name second">Oranges</td><td headers="color second">Orange</td> 
        </tr> 
        </tbody> 
    </table> 
</body> 
</html>

Click to view the demo