[Blogger] Tableのスタイル

記事を書いててテーブルを使うことが時々あるので、 ある程度見栄えがするようにテーブルのスタイルを作った時のメモ。

ブロガー管理画面 > テンプレート > カスタマイズ > アドバンス > CSSを追加

追加した CSS はこんな感じ。

table.standard {
    border: 1px #000000 solid;
    border-collapse: collapse;
    border-spacing: 0;
}

.standard th {
    padding: 5px;
    border: #000000 solid;
    border-width: 0 0 1px 1px;
    background: #F5F5F5;
    font-weight: bold;
    line-height: 120%;
    text-align: center;
}

.standard td {
    padding: 5px;
    border: 1px #000000 solid;
    border-width: 0 0 1px 1px;
    text-align: center;
}

table タグ自体はレイアウト目的でも使っているので、クラスに standard をつけるようにした。
これでこのような table を書くと、

<table class=standard frame="box" rules="all">
<tr><th>Resource</th><th>Daily Quota</th></tr>
<tr><td>Datastore Entity Put Ops </td><td> 4,376</td></tr>
<tr><td>Datastore Entity Delete Ops </td><td> 4,254</td></tr>
<tr><td>Datastore Index Write Ops </td><td> 43,274</td></tr>
</table>

こんな感じのテーブルになる。

Resource	Daily Quota
Datastore Entity Put Ops	4,376
Datastore Entity Delete Ops	4,254
Datastore Index Write Ops	43,274

ちょっとヘッダの色が薄い気もするがｏｋ。