参照:CSS Table Gallery - Infected
Design Name | Author | Country | Comment | Download |
---|---|---|---|---|
Total | 5 designs | |||
Design Name5 | Link | User5 | Description. | Link |
Design Name4 | Link | User4 | Description. | Link |
Design Name3 | Link | User3 | Description. | Link |
Design Name2 | Link | User2 | Description. | Link |
Design Name1 | Link | User1 | Description. | Link |
<p>参照:CSS Table Gallery - <a href='http://icant.co.uk/csstablegallery/index.php?css=73#r73'>Infected</a></p>
<!-- CSS -->
<style type="text/css">
/*
Theme:inphecthyuz
Author:Infected-FX
URL:www.infectedfx.net
Country:Mexico
*/
table {
border-spacing:1px;
font-size:10px;
background-color:#e7e7e7;
color:#b7b7b7;
width:100%;
}
caption {
font-weight:bold;
background:#50adea url(/content/img/css/css_table_gallery/corner.gif) no-repeat right top;
border-bottom:2px solid #1975d7;
color:#fff;
text-transform:uppercase;
padding:10px;
}
td, th {
padding:5px;
line-height:1.5;
}
thead th {
text-align:center;
background:#f5f5f5;
color:#666;
border:1px solid #fff;
text-transform:uppercase;
}
tbody th {
font-weight:bold;
}
tbody tr {
background-color:#fff;
text-align:left;
}
tbody tr.odd {
background:#f9f9f9;
border-top:1px solid #fff;
}
tbody th a:link, tbody th a:visited{
color:#96d030;
background:url(/content/img/css/css_table_gallery/layout.gif) no-repeat left center;
padding-left:18px;
}
tbody th a:hover {
color:#ff8601;
}
tbody tr td {
height:40px;
background:#fff;
border:1px solid #fff;
}
tbody tr.odd td {
background:#f9f9f9;
border-top:1px solid #fff;
}
table td a:link, table td a:visited {
color:#1975d7;
text-decoration:none;
}
table td a:hover {
color:#50adea;
border-bottom:2px solid #8fd5ff;
text-decoration:none ;
}
tbody td a[href="http://www.infectedfx.net"] {
margin:0 auto;
height:15px;
background:url(/content/img/css/css_table_gallery/ok.gif) no-repeat left center;
border-bottom:0;
padding-left:18px;
font-weight:bold;
color:#ff8601;
}
table a[title^="Download"] {
background:url(/content/img/css/css_table_gallery/down.gif) no-repeat center;
padding:20px 0px 0px 15px;
}
tfoot th, tfoot td {
background-color:#e7e7e7;
text-align:center;
font-size:1.2em; font-weight:bold; font-style:italic;
border-bottom:3px solid #ccc;
border-top:1px solid #dfdfdf;
}
</style>
<!-- HTML -->
<div id="itsthetable">
<table summary="Submitted table designs">
<caption>Table designs</caption>
<thead>
<tr>
<th scope="col">Design Name</th>
<th scope="col">Author</th>
<th scope="col">Country</th>
<th scope="col">Comment</th>
<th scope="col">Download</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row">Total</th>
<td colspan="4">5 designs</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row" id="r5"><a href="#">Design Name5</a></th>
<td><a href="">Link</a></td>
<td>User5</td>
<td>Description.</td>
<td><a href="#">Link</a></td>
</tr>
<tr class="odd">
<th scope="row" id="r4"><a href="#">Design Name4</a></th>
<td><a href="">Link</a></td>
<td>User4</td>
<td>Description.</td>
<td><a href="#">Link</a></td>
</tr>
<tr>
<th scope="row" id="r3"><a href="#">Design Name3</a></th>
<td><a href="">Link</a></td>
<td>User3</td>
<td>Description.</td>
<td><a href="#">Link</a></td>
</tr>
<tr class="odd">
<th scope="row" id="r2"><a href="#">Design Name2</a></th>
<td><a href="">Link</a></td>
<td>User2</td>
<td>Description.</td>
<td><a href="#">Link</a></td>
</tr>
<tr>
<th scope="row" id="r1"><a href="#">Design Name1</a></th>
<td><a href="">Link</a></td>
<td>User1</td>
<td>Description.</td>
<td><a href="#">Link</a></td>
</tr>
</tbody>
</table>
</div>