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

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


外枠だけでなく表にするために、CSSファイルを変更する。


表のボーダーを表示する(CSS編)その一」では、表の外枠を書いてみました。次は表にするために必要な、内側の線も表示する様にCSSファイルを変更してみます。


表の外枠と同時に、内側の線を表示するために以下をCSSファイルに追加します。


/*表の外枠*/
table.list {
   border: 2px #002800 solid;   /*2px の実線で表示*/
   border-collapse: collapse;   /*隣り合うセルの枠線を重ねて表示*/
}
/*表の内側全体*/
table.list td {
   border: 1px #002800 solid;   /*1px の実線で表示*/
}


次に、CSSファイルを実行させるために tableタグ に class="list" を追加し

<table class="list">
<tr><td>パーツ</td><td>メーカー</td><td>型式</td></tr>
<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>

とします。


表示された結果は


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


こんな感じです。

何となく表らしくなってきましたが… うぅ〜ん!
装飾とレイアウトは次回と言うことで。


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





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

↓ ↓ ↓ ↓ ↓ ↓

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


トラックバック(0)

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

コメントする

最近のコメント

アーカイブ

今日
昨日

Links

ブログパーツ(無料)

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