Change table style using CSS

Sat Feb 25, 2012 2:30 pm

In this example we use CSS to control the style of table tag .

Code:: <html> <head> <title>Using CSS to control table usage</title> <style rel="stylesheet" type="text/css"> tr.class1 td, th {background-color: #BBB;color:#EEE;} tr.class2 td {background-color: #999;} tr.class1 th {background-color: #F1F1F1;color:#444;} td, th {border-style: groove;} table {border-style: groove;border-collapse: collapse;} table caption { font-size: 0.8em; } </style> </head> <body> <table> <caption>Table with colored background </caption> <tr class="class1"> <th>Column 1 header</th> <th>Column 2 header</th> </tr> <tr class="class2"> <td>Row 1 data1</td> <td>Row 1 data2</td> </tr> <tr class="class1"> <td>Row 2 data1</td> <td>Row 2 data2</td> </tr> <tr class="class2"> <td>Row 3 data1</td> <td>Row 3 data2</td> </tr> <tr class="class1"> <td>Row 4 data1</td> <td>Row 4 data2</td> </tr> </table> </body> </html>