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.

thead th{ text-align:left; background:grey; color:white} 
tbody th { text-align:right; background: lightgrey; color:grey} 
               <th id="rank">Rank</th><th id="name">Name</th><th id="color">Color</th> 
                <th id="first" headers="rank">Favorite:</th><td headers="name first">Apples</td><td headers="color first">Green</td> 
            <th id="second" headers="rank">2nd Favorite:</th><td headers="name second">Oranges</td><td headers="color second">Orange</td> 
Click to view this demo.
  HTML CSS Book 

  1. <th> marks table header
  2. Associating Headers with Cells