<tbody> - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:tbody

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

Introduction

The tbody element marks table body rows.

Most browsers automatically insert the tbody element when they process a table element. CSS selectors that assume the table layout is as written can fail.

For example, a selector such as table > tr won't work. You have to use a selector such as table > tbody > tr, table tr.

The tbody Element summary

Item Value
Element: tbody
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 HTML5The align, char, charoff, and valign attributes are obsolete.

Style Convention 

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

Adding tbody Element 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> 
         <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><!--   www .j av a2s . c  o m-->
</html>

Related Tutorials