HTMLテーブルの表現
HTMLでテーブルを表として使う場合、border="1"ってのだと最悪にダサイ表になるのでわりとよく使ってたのが<table
width="200" border="0" cellpadding="3" cellspacing="1"
bgcolor="#CCCCCC">
<tr> <td
bgcolor="#FFFFFF">a</td>
</tr>
<tr> <td
bgcolor="#FFFFFF">b</td>
</tr></table>結果
こんな感じで、テーブルの背景色をセルの境界から見えるようにして1pxの罫線として表示する方法でした。これだと、すっきりしたきれいな線が引けた上に色も自由自在。しかも、ほとんどのブラウザで問題なく表示できます。しかし問題が.....
★
このテーブルの方法は「背景を印刷」のオプションをチェックしないと
プリント時に線が表示されないのです。
よい方法を模索していたのですが、これに行き着きました。
罫線の表示をCSSでやる方法です。
CSSにて、table関連のタグを再定義します。
table
{
border-collapse:
collapse;
}
td, th
{
border: 1px solid
#999999;
padding:
3px;
font-size:
11px;
line-height:
15px;
}
細かな表示内容はお好みで。
これそのままだと、
使っているテーブルすべてに適用されてしまいますので
適当なクラスを作って、適用される範囲を限定したらいいです。
.in
{
font-size:
11px;
line-height:
16px;
}
.in
table
{
border-collapse:
collapse;
}
.in td, th
{
border: 1px solid
#999999;
padding:
3px;
font-size:
11px;
line-height:
15px;
}
Safari Win IE
Firefoxで
表示、プリントとも問題なくできました。
Mac版IEではちょっと変な表示をしますが
border="0"
cellpadding="0"
cellspacing="0" でなんとかかんとかって感じです。
この方法だと、テーブルごとに設定する必要がなくて
テーブルを作るだけで表示をコントロールできるので楽ちんです。
MacIEの運命やいかに....
