* CSSでテーブルの枠線レイアウト [#x7705b1d]
** まずは HTML 版で復習 [#p3d679c0]
HTML を使ってテーブルの枠線を極細にする場合、cellspacing 属性と cellpadding 属性を使う必要がありました。これは、テーブルの背景色を枠線の色に指定して、各セルの間に細い間隔を用意して、枠線に見せかけるというものです。
|cellspacing|セル同士の間隔|
|cellpadding|セルの外枠と内枠の間隔|
枠線の大きさは、cellspacing で決まります。ただ、セル同士の間隔を枠線として利用すると、セル内の値と枠線にスペースがなくなり、見づらいです。そこで、cellpadding により、ある程度の余白を取ります。
<table border="0" cellspacing="1" cellpadding="2" bgcolor="#000000">
<tr><td bgcolor="#FFFFFF">項目</td><td bgcolor="#FFFFFF">値</td></tr>
</table>
bgcolor なんて久々に打ったなあ…。
** CSS で置き換える [#zbc87d35]
さて、本題に入ります。cellpadding は、各 td や th の padding プロパティを利用することで解決します。cellspacing は、table の border-spacing プロパティで指定できます。ただし、CSS2 なので、ブラウザ互換性を考える場合は、注意してください。IE 6 では、うまく表示できません。
<style>
table { border-spacing : 1px; background-color:#000000; }
th, td { padding : 2px; background-color:#FFFFFF; }
</style>
<table border="0">
<tr><td>項目</td><td>値</td></tr>
</table>
つまり、IE を無視できないのであれば、HTML ベースのレイアウトが必要です。来年には IE 7 が出るでしょうが、そこで改善されていれば嬉しいのですが…
つまり、IE を無視できないのであれば、結局 HTML ベースのレイアウトが必要です。来年には IE 7 が出るでしょうが、そこで改善されていれば嬉しいのですが…
----
** 履歴 [#md7a4475]
- 2005/11/23 ぼくぴ 新規作成
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
