30 Sep, 2009
Table design #2: Box model
Categoriën: Xhtml Strict | box | crossbrowser | table | template
Tabellen zijn gedacht voor het weergeven van data (dat is een globaal begrip) niet om layout van een website te maken. Dit is deel 2 van verschillende mogelijkheden van tabellen van style te voorzien.
HTML
<table summary="Employee Pay Sheet" id="box-table-a"> <thead> <tr> <th scope="col">Employee</th> <th scope="col">Salary</th> <th scope="col">Bonus</th> <th scope="col">Supervisor</th> </tr> </thead> <tbody> <tr> <td>Stephen C. Cox</td> <td>$300</td> <td>$50</td> <td>Bob</td> </tr> <tr> <td>Josephin Tan</td> <td>$150</td> <td>-</td> <td>Annie</td> </tr> <tr> <td>Joyce Ming</td> <td>$200</td> <td>$35</td> <td>Andy</td> </tr> <tr> <td>James A. Pentel</td> <td>$175</td> <td>$25</td> <td>Annie</td> </tr> </tbody> </table>
CSS
#box-table-a {
border-collapse:collapse;
font-family:"Lucida Sans Unicode","Lucida Grande",Sans-Serif;
font-size:12px;
margin:20px;
text-align:left;
width:480px;
}
#box-table-a th {
background:#B9C9FE none repeat scroll 0 0;
border-bottom:1px solid #FFF;
border-top:4px solid #AABCFE;
color:#039;
font-size:13px;
font-weight:normal;
padding:8px;
}
#box-table-a td {
background:#E8EDFF none repeat scroll 0 0;
border-bottom:1px solid #FFF;
border-top:1px solid transparent;
color:#669;
padding:8px;
}
#box-table-a tr:hover td {
background:#D0DAFD none repeat scroll 0 0;
color:#339;
}