Choice Width

35em

Liquid

Accessibility Check

| | | |

更新日

2004年 7月 31日土曜日

CSS

テーブル

1. テーブルに枠線をつける

テーブルにCSSで枠線をつけます。普通にtdタグの上下左右に枠線をつけると重なってしまいます。そこで、下方向へのびる表の場合は、tableタグで上左右に枠線を引き、tdタグで下線を引くようにします。

※本来はborder-collapse: collapseとすれば上記方法を使わずに表示できるのですが、対応しているブラウザ(IE 5 for Win以降。Netscape 7以降、Opera 6以降)で、 Internet Explorer for Mac OS Xなどでは枠線が離れてしまいます。

項目見出し1	項目見出し2	項目見出し3
項目内容1	項目内容2	項目内容3
項目内容1	項目内容2	項目内容3

ページの先頭

2. tableタグ

tableタグでは、上と左側に線を引いておくだけです。

ページの先頭

3. tdタグ

tdタグで残りの右側と下線を引いておきます。

お好みによって、パディングで線からの間隔をあけておきます。

※テーブル内にパディングを使用すると、IE 4.x for Macではレイアウトが崩れることがあります。

ページの先頭

4. thタグ

thタグはヘッダセル(項目見出し用)のタグです。tdタグと同じように右側と下線を引いておきます。あとはお好み(^^;)で文字色とか背景色を変えて項目見出し行のようにしています。

※内部スタイルシートサンプル

前ページ| 次ページ| ページの先頭