見やすいtableのCSSを作成

tableのデザインを作るのが面倒で今まで放置してたのですが、このままではまずい・・・。と思い直して、やっと作りました。
MTの場合、ウィジェットでカレンダーを使っていると、そこにも影響したりするので手間が・・・。
その辺に落ちてるお手本をちょこちょこいじって出来上がりなtableデザインですが、だいぶ見やすくなりました。

というわけで、以前取り上げたMTのループで使える予約変数を表にしました。

MTの繰り返し処理で使える予約変数

name="○○○"	実行内容
>>MTテンプレートタグリファレンス（MTfor）
__first__	ループ処理の先頭の場合実行
__last__	ループ処理の最後の場合実行
__odd__	ループ処理の奇数回目の場合実行
__even__	ループ処理の偶数回目の場合実行
__index__	ループインデックスを格納
__counter__	ループ回数を格納

うん。だいぶ見やすいです。

CSSはこんな感じ

/*テーブル*/
table {
    border-spacing:1px;
    font-size:12px;
    background-color:#e7e7e7;
    color:#333;
    width:100%;
}
caption {
    font-weight:bold;
    border-bottom:2px solid #164B71;
    background:#5c8bad;
    color:#FFF;
    text-transform:uppercase;
    padding:8px;
}
tbody th a:link, tbody th a:visited{
    color:#96d030;
}
td, th {
    padding:5px 5px 5px 18px;
    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:hover {
    color:#ff8601;
}
tbody tr td {
    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 ;
}
tfoot th, tfoot td {
    background-color:#e7e7e7;
    font-weight:bold;
    border-bottom:3px solid #ccc;
    border-top:1px solid #dfdfdf;
}
tfoot a{
    color:#666;
}

ソースは下記

    <table summary="MTの繰り返し処理で使える予約変数">
        <caption>MTの繰り返し処理で使える予約変数</caption>
        <thead>
            <tr>
                <th scope="col">name="○○○"</th>
                <th scope="col">実行内容</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th colspan="2" scope="row"><a href="http://www.movabletype.jp/documentation/appendices/tags/for.html" target="_brank">&gt;&gt;MTテンプレートタグリファレンス（MTfor）</a></th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <th scope="row">__first__</th>
                <td>ループ処理の先頭の場合実行</td>
            </tr>
            <tr class="odd">
                <th scope="row">__last__</th>
                <td>ループ処理の最後の場合実行</td>
            </tr>
            <tr>
                <th scope="row">__odd__</th>
                <td>ループ処理の奇数回目の場合実行</td>
            </tr>
            <tr class="odd">
                <th scope="row">__even__</th>
                <td>ループ処理の偶数回目の場合実行</td>
            </tr>
            <tr>
                <th scope="row">__index__</th>
                <td>ループインデックスを格納</td>
            </tr>
            <tr class="odd">
                <th scope="row">__counter__</th>
                <td>ループ回数を格納</td>
            </tr>
        </tbody>
    </table>

見やすいって素晴らしい。