CSS Styling Table

Example 1: Using CSS, change the background color of table header, table body, and table footer.

<html>
   <head>
      <style>
         caption{font-size:25px; color:violet}
         thead {color:green; background:MediumSpringGreen;}
         tbody {color:blue; background:LightCyan;}
         tfoot {color:red; background:Coral;}
         tbody, tfoot{
            text-align:center;
         }
      </style>
   </head>
   <body>
      <table border="3px"> 
         <caption>Table Heading</caption>
         <tfoot>
            <tr> <td>Total</td> <td>Student</td> <td>3</td> </tr>
         </tfoot>
         <thead>
            <tr> <th>Sno</th> <th>Name</th> <th>Course</th> </tr>
         </thead>
         <tbody>
            <tr> <td>1</td> <td>Anna</td> <td>Web Designing</td> </tr>
            <tr> <td>2</td> <td>Adam</td> <td>Programming</td> </tr>
            <tr> <td>3</td> <td>Alex</td> <td>Android Development</td> </tr>
         </tbody>
      </table>
   </body>
</html>

CSS border-collapse

CSS border-collapse property specify whether the table border should collapse into a single border or it should be separated. CSS border-collapse property has 2 values i.e. collapse or separated, default value is separated. ver CSS2.

Example 2: CSS border-collapse

table{
    border-collapse:collapse; 
}