PHP & JavaScript Room :: 設置サンプル

設置サンプル

実行結果

参照:CSS Table Gallery - mintgreen

Table designs
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>

polarized women