PHP & JavaScript Room :: 設置サンプル
実行結果
参照：A CSS styled table version 2
| Webhosting Home | Webhosting Home Plus | Webhosting Business | Webhosting Business Plus | |
|---|---|---|---|---|
| Webhosting Home € 4,95/ month  |
Webhosting Home Plus € 9,95 / month |
Webhosting Business €14,95 / month |
Webhosting Business Plus € 19,95 / month |
|
| Data usage | 1 GB per month | 2 GB per month | 5 GB per month | 10 GB per month |
| Opslag Capaciteit | 100 MB | 250 MB | 500 MB | 1 GB |
| MySQL Databases | 1 | 2 | 5 | 10 |
| Email Boxes | 5 | 10 | 25 | 50 |
| Email Addresses | Unlimited | Unlimited | Unlimited | Unlimited |
| Spam and Virus filter |  |
|
|
|
| Mailinglists | |
|
|
|
| Autoresponders | |
|
|
|
| PHP Supportg | |
|
|
|
| CGI Support | |
|
|
|
| SSL Support | |
|
|
|
| DNS Management | |
|
|
|
| Error Documents | |
|
|
|
| Secure Folders | |
|
|
|
| Statistics | |
|
|
|
ソース
<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>