Blogger 表を使おう (2) 色々なＣＳＳ

前回の Blogger 表を使おう (1) 利用の基本 に引き続き、今回は表の見た目のご紹介です。
Blog に合った表形式を選んで、自分らしさを演出して下さい。
あまり、懲り過ぎるのは、過ぎたるは及ばざるが如し　ですけど ... 。
やっぱり、あっ、これはあの人の Blog だ　って感じの表を見せたいですものね。



さて、前回はよく見掛ける形の表形式のこんなものをご紹介しましたね。

列 1	列 2	列 3	列 4
Text 1-1	Text 1-2	Text 1-3 あいう	Text 1-4
Text 2-1	Text 2-2	Text 2-3　えおか	Text 2-4
Text 3-1	Text 3-2	Text 3-3　　きくけ ... ん	Text 3-4

HTML の内容はそのままで、ＣＳＳの違いで、どの様に表の見た目が変わるかご覧下さい。
あっ勿論、参照するテーブル名は異なりますので、 ... お分かりですよね。

以下に、ＣＳＳ　表の例　の順でご紹介していきます。
無論、色や幅の設定数値を変えれば印象も変わりますので、トライして見て下さい。



その１　背景色指定

.table-z902 {
border-collapse: collapse; /*  枠線 collapse:1本 separate:2本分離 */
}
.table-z902 th {
border: solid 1px  #696969; /* 線種 solid：実線 dashed：破線 ...　線幅　線色 HTML16 進数 */
background-color: #f0ffff ;
padding: 0.3em; /* 余白 単位 em：文字　px：ピクセル */
}
.table-z902 td {
border: solid 1px #696969;  /* 線種 solid：実線 dashed：破線 ...　線幅　線色 HTML16 進数 */
background-color: #f5f5f5 ;
padding: 0.3em; /* 余白 単位 em：文字　px：ピクセル */
}

列 1	列 2	列 3	列 4
Text 1-1	Text 1-2	Text 1-3 あいう	Text 1-4
Text 2-1	Text 2-2	Text 2-3　えおか	Text 2-4
Text 3-1	Text 3-2	Text 3-3　　きくけ ... ん	Text 3-4

その２　罫線二重　線種指定　文字左右余白指定

.table-z903 {
border-collapse: separate; /*  枠線 collapse:1本 separate:2本分離 */
}
.table-z903 th {
border: dashed 1px  #696969; /* 線種 solid：実線 dashed：破線 ...　線幅　線色 HTML16 進数 */
background-color: #f0ffff ;
padding: 0.3em 0.6em; /* 余白 上下 左右　単位 em：文字　px：ピクセル */
}
.table-z903 td {
border: dotted 1px #696969;　 /* 線種 solid：実線 dashed：破線 ...　線幅　線色 HTML16 進数 */
background-color: #f5f5f5 ;
padding: 0.3em 0.6em; /* 余白 上下 左右　単位 em：文字　px：ピクセル */
}

列 1	列 2	列 3	列 4
Text 1-1	Text 1-2	Text 1-3 あいう	Text 1-4
Text 2-1	Text 2-2	Text 2-3　えおか	Text 2-4
Text 3-1	Text 3-2	Text 3-3　　きくけ ... ん	Text 3-4

その３　罫線横のみ　見出しのみ色付き線

.table-z904 {
border-collapse: separate; /*  枠線 collapse:1本 separate:2本分離 */
}
.table-z904 th {
border-bottom: solid 1px  #4169E1; /* 線種 solid：実線 dashed：破線 ...　線幅　線色 HTML16 進数 */
padding: 0.3em; /* 余白 単位 em：文字　px：ピクセル */
}
.table-z904 td {
border-bottom: solid 1px #696969;  /* 線種 solid：実線 dashed：破線 ...　線幅　線色 HTML16 進数 */
padding: 0.3em; /* 余白 単位 em：文字　px：ピクセル  */
}

列 1	列 2	列 3	列 4
Text 1-1	Text 1-2	Text 1-3 あいう	Text 1-4
Text 2-1	Text 2-2	Text 2-3　えおか	Text 2-4
Text 3-1	Text 3-2	Text 3-3　　きくけ ... ん	Text 3-4

さて、如何でしたでしょうか。
もっと凝った表も可能なのですが、これは応用と言う事で、ご自分で調べて見て下さい。

最後に、基本から押さえるなら　次のリンクが　とてもお勧めです。　　表組みについての記述もあります。

　　テーブル　　by Masahide Kanzaki さま　　The Web KANZAKI　のサイト