<th>
Description
This 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.
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><!--from ww w . ja va 2 s. c o m-->
</html>
The code above generates the following result.
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 w ww. j a v a 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>
The code above generates the following result.
