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

参照：CSS Table Gallery - rockstar

<p>参照：CSS Table Gallery - <a href='http://icant.co.uk/csstablegallery/index.php?css=38#r38'>rockstar</a></p>
<!-- CSS -->
<style type="text/css">
/*
Rockstar 0.91
Table design by Jens Wedin, www.jedisthlm.com
*/
table                {font:100%/1.7em "trebuchet ms", "bitstream vera sans", verdana, helvetica, sans-serif; width:100%; border-collapse:separate; border-spacing:0; margin:0 0 1em 0; color:#000;}
a                     {color:#09f; text-decoration:none; border-bottom:1px solid;}
a:visited             {color:#c3c; font-weight:normal;}
a:hover             {border-bottom-style:dotted;}
thead th,
thead td            {font-weight:bold; line-height:normal; text-align:left; border-bottom:0.4em solid #09f;}
tfoot th,
tfoot td            {text-align:left; border-top:0.4em solid #09f; font-weight:bold}
th,
td                     {padding:0.25em;}
tbody th,
td                    {text-align:left; vertical-align:top;}
tbody th            {font-weight:normal; white-space:nowrap;}
tbody th a:link,
tbody th a:visited     {font-weight:bold;}
tbody th + td        {white-space:nowrap;}
tbody td,
tbody th             {border:1px solid #fff; border-width:1px 0;}
tbody tr.odd th,
tbody tr.odd td     {border-color:#deded8; background:#f9f9fb;}
tbody tr:hover td,
tbody tr:hover th     {background:#fbfbf8;}
caption             {font-weight:bold; font-size:1.7em; text-align:left; margin:0; padding:0.5em 0.25em;}
td + td + td + td {white-space:nowrap;}
td + td + td + td a:before {content:"\2193 ";}
a[href^="http://"]:not([href*="http://icant.co.uk"])::after {content:"\2197"; }
td + td + td + td a[href^="http://"]:not([href*="http://icant.co.uk"])::after {content:""; }
</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>