参照:A CSS styled table version 2
<p>参照:<a href='http://veerle.duoh.com/blog/comments/a_css_styled_table_version_2/'>A CSS styled table version 2</a></p>
<style type="text/css">
table img { border:0; margin:.5em; }
table {
margin:1em 0 1em 1px; padding:0;
border:1px solid #e5eff8;
border-spacing:0;
border-collapse:collapse;
}
caption {
color: #9ba9b4;
font-size:.94em;
letter-spacing:.1em;
margin:1em 0 0 0; padding:0;
caption-side:top;
text-align:center;
}
tr.odd td {
background:#f7fbff
}
tr.odd .column1 {
background:#f4f9fe;
}
.column1 {
background:#f9fcfe;
}
td {
color:#678197;
border-bottom:1px solid #e5eff8;
border-left:1px solid #e5eff8;
padding:.3em 1em;
text-align:center;
}
th {
font-weight:normal;
color: #678197;
text-align:left;
border-bottom: 1px solid #e5eff8;
border-left:1px solid #e5eff8;
padding:.3em 1em;
}
thead th {
background:#f4f9fe;
text-align:center;
font:bold 1.2em/2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
color:#66a3d3
}
tfoot th {
text-align:center;
background:#f4f9fe;
}
tfoot th strong {
font:bold 1.2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
margin:.5em .5em .5em 0;
color:#66a3d3;
}
tfoot th em {
color:#f03b58;
font-weight: bold;
font-size: 1.1em;
font-style: normal;
}
</style>
<table summary="Webhosting products overview showing all available packages, what's included and what the monthly cost is with an option to order">
<caption>Company X webhosting products overview</caption>
<thead>
<tr class="odd">
<td class="column1"></td>
<th scope="col" abbr="Home">Webhosting Home</th>
<th scope="col" abbr="Home Plus">Webhosting Home Plus</th>
<th scope="col" abbr="Business">Webhosting Business</th>
<th scope="col" abbr="Business Plus">Webhosting Business Plus</th>
</tr>
</thead>
<tfoot>
<tr class="odd">
<td class="column1"> </td>
<th scope="col"><strong>Webhosting Home</strong><br><em>€ 4,95</em>/ month<br>
<a href="#" title="Bestel Web Hosting Home"><img src="/content/img/css/b-order.gif" alt="order now" width="73" height="21" /></a></th>
<th scope="col"><strong>Webhosting Home Plus</strong><br><em>€ 9,95 </em>/ month<br>
<a href="#" title="Bestel Web Hosting Home Plus"><img src="/content/img/css/b-order.gif" alt="order now" width="73" height="21" /></a></th>
<th scope="col"><strong>Webhosting Business</strong><br><em>€14,95</em> / month<br>
<a href="#" title="Bestel Web Hosting Business"><img src="/content/img/css/b-order.gif" alt="order now" width="73" height="21" /></a></th>
<th scope="col"><strong>Webhosting Business Plus</strong><br><em>€ 19,95</em> / month<br>
<a href="#" title="Bestel Web Hosting Business Plus"><img src="/content/img/css/b-order.gif" alt="order now" width="73" height="21" /></a></th>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row" class="column1">Data usage</th>
<td>1 GB per month</td>
<td>2 GB per month</td>
<td>5 GB per month</td>
<td>10 GB per month</td>
</tr>
<tr class="odd">
<th scope="row" class="column1">Opslag Capaciteit</th>
<td>100 MB</td>
<td>250 MB</td>
<td>500 MB</td>
<td>1 GB</td>
</tr>
<tr>
<th scope="row" class="column1">MySQL Databases</th>
<td>1</td>
<td>2</td>
<td>5</td>
<td>10</td>
</tr>
<tr class="odd">
<th scope="row" class="column1">Email Boxes</th>
<td>5</td>
<td>10</td>
<td>25</td>
<td>50</td>
</tr>
<tr>
<th scope="row" class="column1">Email Addresses</th>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
</tr>
<tr class="odd">
<th scope="row" class="column1">Spam and Virus filter</th>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
</tr>
<tr>
<th scope="row" class="column1">Mailinglists</th>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
</tr>
<tr class="odd">
<th scope="row" class="column1">Autoresponders</th>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
</tr>
<tr>
<th scope="row" class="column1">PHP Supportg</th>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
</tr>
<tr class="odd">
<th scope="row" class="column1">CGI Support</th>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
</tr>
<tr>
<th scope="row" class="column1">SSL Support</th>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
</tr>
<tr class="odd">
<th scope="row" class="column1">DNS Management</th>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
</tr>
<tr>
<th scope="row" class="column1">Error Documents</th>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
</tr>
<tr class="odd">
<th scope="row" class="column1">Secure Folders</th>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
</tr>
<tr>
<th scope="row" class="column1">Statistics</th>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
<td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td>
</tr>
</tbody>
</table>