Table styling with CSS - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Table

Description

Table styling with CSS

Demo Code

ResultView the demo in separate window 


<html>
 <head> 
  <style>
table {<!--  w  w  w  .ja v a 2  s  .c o m-->
   width:301px;
   background:Chartreuse;
   border-collapse:collapse;
}

caption {
   background:yellow;
   color:blue;
}

th {
   border:2px solid pink;
   height:41px;
   background:OrangeRed;
}

td {
   border:2px solid grey;
}

tbody tr:nth-child(even) {
   background:BlueViolet;
}

tbody td {
   text-align:center;
}

tbody td:first-child {
   text-align:right;
}

tfoot {
   background:Chartreuse;
}
</style> 
 </head> 
 <body> 
  <table> 
   <caption>
     Lorem 
   </caption> 
   <thead> 
    <tr> 
     <th></th> 
     <th>Lorem ipsum</th> 
     <th>Lorem </th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>Lore</td> 
     <td>Lorem ips</td> 
     <td>Lorem ips</td> 
    </tr> 
    <tr> 
     <td>Lore</td> 
     <td>Lorem ips</td> 
     <td>Lorem ips</td> 
    </tr> 
    <tr> 
     <td>Lore</td> 
     <td>Lorem ips</td> 
     <td>Lorem ips</td> 
    </tr> 
    <tr> 
     <td>Lore</td> 
     <td>Lorem ips</td> 
     <td>Lorem ips</td> 
    </tr> 
    <tr> 
     <td>Lore</td> 
     <td>Lorem ips</td> 
     <td>Lorem ips</td> 
    </tr> 
    <tr> 
     <td>Lore</td> 
     <td>Lorem ips</td> 
     <td>Lorem ips</td> 
    </tr> 
   </tbody> 
   <tfoot> 
    <tr> 
     <td>Lor</td> 
     <td>Lorem </td> 
     <td>Lorem </td> 
    </tr> 
   </tfoot> 
  </table>  
 </body>
</html>

Related Tutorials