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

参照：CSS Table Gallery - Infected

<p>参照：CSS Table Gallery - <a href='http://icant.co.uk/csstablegallery/index.php?css=73#r73'>Infected</a></p>
<!-- CSS -->
<style type="text/css">
/* 
    Cusco Sky table styles
    written by Braulio Soncco http://www.buayacorp.com
*/
table {
    border-collapse:collapse;
    color:#555;
    width:99%;
    margin:0 0 0 1px;
    font-size:12px;
}
table, th, td {
    border:1px solid #d4e0ee;
    color:#555;
}
caption {
    font-size:150%;
    font-weight:bold;
    margin:5px;
}
td, th {
    padding:5px;
}
thead th {
    text-align:center;
    background:#e6edf5;
    color:#4f76a3;
    font-size:100% !important;
}
tbody th {
    font-weight:bold;
}
tbody tr { background:#fcfdfe; }
tbody tr.odd { background:#f7f9fc; }
table a:link {
    color:#718abe;
    text-decoration:none;
}
table a:visited {
    color:#718abe;
    text-decoration:none;
}
table a:hover {
    color:#718abe;
    text-decoration:underline !important;
}
tfoot th, tfoot td {
    font-size:85%;
}
</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>