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

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


現在使用しているスタイルシートは、表のボーダーが表示されないので、CSSファイルを少し変更してみることに。


MovableType のスタイルシートには、表のボーダーが表示されないスタイルシートがあるようで(他のスタイルシートにはあるのかな?)、表を作成してもピリッとしない表に成ってしまう。

そこで表にボーダーを表示するために、CSSファイルを変更してみたいと思います。


CSSファイルを変更するのはなぜ?

表を作成する度に毎回スタイルを設定する煩わしさが、スタイルシートを使用して表を作成するようにすると、無くなると言った利点があります。


現在、下記のタグで表を作成すると…

<table>
<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)


そこで、まず外枠を表示するために以下をCSSファイルに追加します。


/*表の外枠*/
table.waku {
   border: 2px #002800 solid;   /*2px の実線で表示*/
}



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

<table class="waku">
<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)


こんな感じで外枠が表示されました。

これで、今後外枠だけ表示する場合は、tableタグ に class="waku" を追加すれば良いだけです。


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





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

↓ ↓ ↓ ↓ ↓ ↓

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


トラックバック(0)

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

コメントする

最近のコメント

アーカイブ

今日
昨日

Links

ブログパーツ(無料)

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