th headers='' - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:th

  1. HOME
  2. HTML CSS
  3. HTML Tag
  4. th

Introduction

The td and th elements headers attribute 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.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
   <head> 
      <title>Example</title> 
      <style>
thead th, tfoot th { text-align:left; background:grey; color:white}
tbody th { text-align:right; background: lightgrey; color:grey}
thead [colspan], tfoot [colspan] {text-align:center; }

      </style> 
   </head> 
   <body> 
      <table> 
         <thead> 
            <tr> 
               <th id="rank">Rank</th> 
               <th id="name">Name</th> 
               <th id="color">Color</th> 
               <th id="sizeAndVotes" colspan="2">Size &amp; Votes</th> 
            </tr> 
         </thead> 
         <tbody> 
            <tr> 
               <th id="first" headers="rank">Favorite:</th> 
               <td headers="name first">CSS</td> 
               <td headers="color first">Green</td> 
               <td headers="sizeAndVote first">Medium</td> 
               <td headers="sizeAndVote first">500</td> 
            </tr> 
            <tr> 
               <th id="second" headers="rank">2nd Favorite:</th> 
               <td headers="name second">HTML</td> 
               <td headers="color second">Orange</td> 
               <td headers="sizeAndVote second">Large</td> 
               <td headers="sizeAndVote second">450</td> 
            </tr> 
         </tbody> 
         <tfoot> 
            <tr> 
               <th colspan="5">? 2019 java2s.com</th> 
            </tr> 
         </tfoot> 
      </table>  
   </body><!--   w w w  .  jav a2  s.co m-->
</html>

Related Tutorials