【Blogger】表のスタイル（CSS）を設定する

BloggerでCSSを設定するテストです。
サンプルテーブルを作って、CSSのスタイル適用の確認をします。


【テーブルサンプル】
------------------------------------------------------
何も指定していないただのテーブル

タイトル

項目１	項目２	項目３
No１	データ１	内容１
No２	データ２	内容２
No３	データ３	内容３

【スタイル適用後テーブル】
------------------------------------------------------
クラスを設定します。<table class="sample">

タイトル

項目１	項目２	項目３
No１	データ１	内容１
No２	データ２	内容２
No３	データ３	内容３

【手順】
------------------------------------------------------
１）管理画面から「テンプレート」→「カスタマイズ」ボタン押下
２）テンプレートデザイナーから「上級者向け」→「CSS追加」を選択
３）テーブル用のsampleクラスを作成していきます。


以下のような CSSを設定してみました。
------------------------------
/* テーブル幅設定 */
table.sample { width:50%; }

/* テーブル枠線とカラー設定 */
table.sample,.sample th,.sample td{
    border: 1px solid #800080;
    border-collapse:collapse;
}
/* タイトルの設定 */
.sample caption {
    color:#000080;
    font-weight:bold;
}
/* 項目行のカラー設定 */
.sample th{
    color:#FFF;
    background-color:#800080;
}

------------------------------

表を確認しながら設定出来きて便利です。