HTML Tutorial - HTML Table Header

The td and th elements define the headers attribute, which can be used to make tables easier to process with screen readers and other technology.

The value of the headers attribute is the ID attribute value of one or more th cells.

The following code shows how you can use this attribute.

thead th, tfoot th {<!--  w  ww .  j  av a  2 s . c o  m-->
  text-align: left;
  background: grey;
  color: white

tbody  th {
  text-align: right;
  background: lightgrey;
  color: grey

thead [colspan], tfoot [colspan] {
  text-align: center;
        <th id="rank">Rank</th>
        <th id="name">Name</th>
        <th id="color">Color</th>
        <th id="sizeAndVotes" colspan="2">Size & Votes</th>
        <th id="first" headers="rank">Favorite:</th>
        <td headers="name first">XML</td>
        <td headers="color first">HTML</td>
        <td headers="sizeAndVote first">CSS</td>
        <td headers="sizeAndVote first">ABC</td>
        <th id="second" headers="rank">2nd Favorite:</th>
        <td headers="name second">Empty</td>
        <td headers="color second">XYZ</td>
        <td headers="sizeAndVote second">ABC</td>
        <td headers="sizeAndVote second">A</td>
        <th colspan="5">&copy; 2011 Fruit Data Enterprises</th>

Click to view the demo

The global id attribute is added to the th elements in the thead and the th elements in the tbody.

For each td and th in the tbody, the headers attribute is associates the cell with the column header.