参照:CSS Table Gallery - mintgreen
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=28#r28'>mintgreen</a></p>
<!-- CSS -->
<style type="text/css">
/**************************************************
* Data Tables and Cascading Style Sheets Gallery *
* http://icant.co.uk/csstablegallery/index.php *
* -------------------------------------------- *
* Author: Taimar Teetlok > http://taimar.pri.ee/ *
**************************************************/
table {
width:100%;
color:#212424;
margin:0 0 1em 0;
font:80%/150% "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Lucida, Helvetica, sans-serif;
border-spacing:0;
border-collapse:collapse;
}
th, td {
padding:1em 0;
}
caption {
width:100%;
height:39px;
font-size:0;
line-height:0;
text-indent:-5000em;
background: url(/content/img/css/css_table_gallery/caption.gif) no-repeat 98% 0;
}
caption:hover {
background-position:98% 100%;
}
/* HEADER */
thead {
background:#524123;
}
thead tr th {
text-align:center;
color:#faf7d4;
border-bottom:3px solid #A5D768;
}
/* FOOTER */
tfoot {
color:#fff;
background:#524123;
}
tfoot tr th, tfoot tr td {
padding:.2em .6em;
border-top:2px solid #a5d768;
}
tfoot tr th {
}
tfoot tr td {
text-align:right;
}
/* BODY */
tbody tr td {
background:#ddf0bd url(/content/img/css/css_table_gallery/bg_cell.gif) no-repeat top left;
}
tbody tr.odd td {
background-color:#d0eba6;
}
tbody tr td:hover, tbody tr.odd td:hover {
background:#c5e894;
}
tbody tr th, tbody tr td {
padding:5px;
border:1px solid #a6ce39;
}
tbody tr th {
padding-right:1em;
text-align:right;
font-weight:normal;
background:#c5e894 url(/content/img/css/css_table_gallery/bg_cell.gif) no-repeat top left;
text-transform:uppercase;
}
tbody tr th:hover {
background:#d0eba6;
}
table a[href*="taimar.pri.ee"] {
float:left;
width:64px;
height:64px;
font-size:0;
text-decoration:none;
background:transparent url(http://taimar.pri.ee/examples/table-design/taimar.gif) no-repeat 0 0;
}
table a[title^="Download"] {
float:none;
width:auto;
height:auto;
font-size:100%;
background:none;
}
/* LINKS */
table a {
color:#854400!important;
text-decoration:none;
}
table a:visited {
text-decoration:line-through;
}
table a:hover {
text-decoration:underline;
}
</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>