Styling HTML Tables with CSS

The Web Book

Firstname Lastname Salary
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Cleveland Brown $250

CSS Style HTML Table Example Code

HTML CODE ............................. <!DOCTYPE html> <html> <body> <table> <tr class="head"> <th>Firstname</th> <th>Lastname</th> <th>Salary</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td class="c1">$100</td> </tr> <tr class="even"> <td>Lois</td> <td>Griffin</td> <td class="c1">$150</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td class="c1">$300</td> </tr> <tr class="even"> <td>Cleveland</td> <td>Brown</td> <td class="c1">$250</td> </tr> </table> </body> </html> CSS CODE ....................................................................................................... table, td, th {border-spacing: 0px;} th {background-color:#0066cc; color:white;} table {width:100%;} tr.head th:first-child { border-top-left-radius: 5px; -webkit-border-top-left-radius: 5px; -moz-border-radius-topleft: 5px;} tr.head th:last-child {-webkit-border-top-right-radius: 5px;-moz-border-radius-topright: 5px; border-top-right-radius: 5px;} tr.even {background-color: #e0e9f0;} td {border-top: 1px solid #f1f8fe; border-bottom: 1px solid #cbd2d8; border-right: 1px solid #cbd2d8;} th {height:30px;} .c1 {text-align:right;} Back