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

実行結果

参照:CSS Table Gallery - Infected

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=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>

polarized women