表のボーダーを表示する(CSS編)その三

| コメント(0) | トラックバック(0)


見やすい表にするために、装飾とレイアウトを変更する。


表のボーダーを表示する(CSS編)その二」では、表を書いてみましたが、レイアウトが悪く見づらいようですね。

もっと表らしく見せるためにCSSファイルを変更してみます。


まず表に欠かせないのがヘッダ部分、ここでは最上段のパーツ、メーカー、型式の欄です。

この部分をヘッダと認識させる為に、ヘッダ部分のセルのタグを td から th、/td から /th に変更し<thead></thead>を追加します。



<table class="list">
<thead>
<tr><th>パーツ</th><th>メーカー</th><th>型式</th></tr>
</thead>
<tr><td>マザーボード</td><td>MSI</td><td>G965MDH-FI</td></tr>
<tr><td>CPU</td><td>Intel</td><td>Pentium D</td></tr>
<tr><td>メモリー</td><td>CFD</td><td>SDRAM PC5400(DDR2-667)</td></tr>
</table>


と成るようにします。



ヘッダを飾るために、以下をCSSファイルに追加します。
ヘッダ部分のセルのタグを td から th、/td から /th に変更した関係で、表の内側全体にもtable.list th,を追加する。


/*表の内側全体*/
table.list th,
table.list td {
   border: 1px #002800 solid;   /*1px の実線で表示*/
}


/*ヘッダを装飾*/
table.list thead th {
   border-bottom: 3px double #cc0000;/*3px の二重線で表示*/
   background-color: #7DFF7D;          /*背景色*/
}



後は、文字のサイズとセル内の余白を調整します。
   font-size: 90%;   padding: 0.3em;を下記の部分に追加します。


/*表の内側全体*/
table.list th,
table.list td {
   font-size: 90%;              /*全体の文字を縮小*/
   padding: 0.3em;              /*セルの余白*/
   border: 1px #002800 solid;   /*1px の実線で表示*/
}



これで表のレイアウトは完了です。


では、このレイアウトでの表示結果は


パーツメーカー型式
マザーボードMSIG965MDH-FI
CPUIntelPentium D
メモリーCFDSDRAM PC5400(DDR2-667)


こんな感じに成ります。


最終的なCSSファイルの追加と変更は、このように成ります。


/*表の外枠*/
table.list {
   border: 2px #002800 solid;   /*2px の実線で表示*/
   border-collapse: collapse;   /*隣り合うセルの枠線を重ねて表示*/
}
/*表の内側全体*/
table.list th,
table.list td {
   padding: 0.3em;              /*セルの余白*/
   font-size: 90%;              /*全体の文字を縮小*/
   border: 1px #002800 solid;   /*1px の実線で表示*/
}
/*ヘッダを装飾*/
table.list thead th {
   border-bottom: 3px double #002800;/*3px の二重線で表示*/
   background-color: #FFAAFF;        /*背景色*/
}


今後このレイアウトの表を作成する場合は、tableタグ に class="list" を追加すれば良いだけと成ります。


AllAbout さんの「スタイルシートでワープロ並みに表を装飾!」を参考にしています。





参考になった方はクリック

↓ ↓ ↓ ↓ ↓ ↓

にほんブログ村 IT技術ブログ 自宅サーバー構築へ


トラックバック(0)

トラックバックURL: http://jisakupc.ddo.jp/cgi-bin/mt/mt-tb.cgi/3929

コメントする

最近のコメント

アーカイブ

今日
昨日

Links

ブログパーツ(無料)

インフォブログランキング
知識の杜