CSSでテーブルの枠線レイアウト

CSSでテーブルの枠線レイアウト†

まずは HTML 版で復習†

HTML を使ってテーブルの枠線を極細にする場合、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 で置き換える†

さて、本題に入ります。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 が出るでしょうが、そこで改善されていれば嬉しいのですが…

履歴†

• 2005/11/23 ぼくぴ 新規作成

最新の20件

edit