<thead> - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:thead

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

Introduction

The thead element marks header rows, the column labels, for a table element.

The thead Element summary

Item Value
Element: th
Element Type: N/A
Permitted Parents: The table element
Local Attributes: None
Contents: Zero or more tr elements
Tag Style: Start and end tags
New in HTML5? No
Changes in HTML5 The align, char, charoff, and valign attributes are obsolete.

Style Convention 

thead {
   display: table-header-group;
   vertical-align: middle;
   border-color: inherit;
}

Without the thead element, tr elements belongs to the body of the table.

With thead and tbody elements added to the table, and the more flexible CSS selectors you can use as a consequence.

Adding thead and tbody Elements to a Table

Demo Code

ResultView the demo in separate window 

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

      </style> 
   </head> 
   <body> 
      <table> 
         <thead> 
            <tr> 
               <th>Rank</th>
               <th>Name</th>
               <th>Level</th>
               <th>Size</th> 
            </tr> 
         </thead> 
         <tbody> 
            <tr> 
               <th>Favorite:</th> 
               <td>CSS</td> 
               <td>HTML</td> 
               <td>SQL</td> 
            </tr> 
            <tr> 
               <th>2nd Favorite:</th> 
               <td>Java</td> 
               <td>C</td> 
               <td>C++</td> 
            </tr> 
            <tr> 
               <th>3rd Favorite:</th> 
               <td>Javascript</td> 
               <td>Python</td> 
               <td>Ruby</td> 
            </tr> 
         </tbody> 
      </table>  
   </body><!-- ww w.  j  a  v  a2s  .c om-->
</html>

Related Tutorials