change the style of table cells

Sat Feb 25, 2012 9:40 pm

In this example we focus on changing the style of table tag cells ( th and td tags ).

Code:: <html> <head> <title>Control the style of table Cells</title> <style type="text/css"> table { border-collapse: collapse; border: 6px solid #555; } td { padding: 5px; } th { color: white; background-color: black; } td, th+th { border: 6px solid #777; } td+td { border: 6px solid #bbb; text-align: center; } </style> </head> <body> <table> <caption>Table with colored background </caption> <tr > <th>Column 1 header</th> <th>Column 2 header</th> </tr> <tr > <td>Row 1 data1</td> <td>Row 1 data2</td> </tr> <tr > <td>Row 2 data1</td> <td>Row 2 data2</td> </tr> <tr > <td>Row 3 data1</td> <td>Row 3 data2</td> </tr> <tr > <td>Row 4 data1</td> <td>Row 4 data2</td> </tr> </table> </body> </html>