罫線のような table
Table of Contents
HTML を印刷にも使えると便利だと思いませんか。メモや資料を Wiki などで蓄積し始めると、これがそのまま印刷できたら便利だなぁと思うようになります。というか、わざわざ Word なんかコピーして、なんてかったるくてやってられません。そこで、印刷しても違和感のない文書になるように表現を工夫します。
今回はその中で特に違和感の大きい table について。
初稿 2002.02.18.
立体的な table はやだ
HTML の TABLE は伝統的には立体的です。
これは Netscape 風なだけで実際には HTML は見た目を定義するものじゃないんだ、という意見もあると思いますが、現実にグラフィカルなブラウザはみんなこの形を踏襲しています。
ずっとこの立体的な table を見ていれば違和感はあまりないのかもしれませんが、やはり文書の中にいきなりこの形の table が出てくると見にくいです。普通にワープロで書かれた文書では表はもっとフラットな、線が二十二なったりしていない表です。HTML で無理矢理そんな表作らなくていいじゃないかと思うかもしれませんが、HTML は文書の意味を手軽に構造化できる優れたフォーマットですので、日常的に利用できるなら利用したいと思うのが人情ってもの。そのためにもこのテーブルの表現にはこだわっておきたいです。
しかし、立体的なのがいやだからといって border を取ると今度は途端に見にくくなってしまいます。
罫線風の table を実現するには
やはり見やすいのはこのような
ただの線だけで構成された、変に立体的じゃない table ではないでしょうか。
table 二段重ねで cellspaing="1"
HTML だけを使った伝統的なテクニック。table の背景色を透かして見ることで線を擬似的に再現します。
<style><!--
table {
background-color: black;
}
td {
background-color: white;
color: black;
}
-->
</style>
<table border="0" cellspacing="1" cellpadding="3">
<tr>
<td>場所を取らなくて</td>
<td>通常文書内でも</td>
</tr>
<tr>
<td>違和感のない</td>
<td>table 表現</td>
</tr>
</table>ここでは CSS で背景色を指定しているのは好みの問題で、もちろん bgcolor 属性をふんだんに使う方が「正当派」なのではないかと予想されます。
でも実は Netscape 4 ではこの方法では「線」にならないのです。これは table 自分自身の背景色を透かして見ることができないからです。同じ効果を出すためには table を二段に重ねる必要があります。
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="black">
<table border="0" cellspacing="1" cellpadding="3" bgcolor="white">
<tr&g;
<td>場所を取らなくて</td>
<td>通常文書内でも</td>
</tr>
<tr>
<td>違和感のない</td>
<td>table 表現</td>
</tr>
</table>
</td>
</tr>
</table>恐らく CSS 好みの個人サイトでない限り、この方法が最もポピュラーでしょう。
しかしこの方法には「table の背景色を常に文書の背景色に合わせておかないといけない」という制約があります。まー多くのサイトは文書の部分は白バックになっているので白にしておけばいいという話もありますが、本サイトのように「真っ白の背景に真っ黒の文字はまぶしい」と判断して少し色を乗せているページの場合の場合は話が面倒になります。
しかもある日「ページの背景色をちょっと変えようかなぁ」と思ったときには全部の table を直さなければいけないという事態に陥ってしまいます。まぁ内側の table に必ず class="inner" をセットしておいて CSS で色を乗せるといった方法もありますが、普通、この手の方法を採用しているページでは CSS で背景色を乗せるようなことはしていなかったりします。なぜならこの方法はそもそも CSS の対応具合によらずに同じ見た目を再現するためのテクニックだから。
もう一つ、印刷するときには「背景を印刷するオプション」を設定していないと意図通りに印字されません。オプションに依存してしまうのは誤解を招きやすい（というかまず自分が悩む）し使い勝手も悪いので、印刷を考慮に入れるなら以降の方法の方が有利です。
frame属性、rules属性
Mozilla, Opera7 ではこれだけで実現できます。
<table frame="box" rules="all">この書き方をした場合は cellspacing の影響は受けないようです。cellpadding については DOCTYPE によって若干変化がありますので、きっちり決めたい場合はよく調査しておくか、CSS の padding を使った方がいいかも。
IE 6 の場合はやはり立体的になってしまい、cellspacing の影響も出ます。
border="1"の場合と同じです。
border-spacing: 0 で border
以前はこの方法を好んで使っていました。今思うと無駄に複雑な方法ですが、せっかくなので消さずに紹介しておきます。CSS で
table {
border-spacing: 0;
empty-cells: show;
border-top: 0.4pt solid black;
border-left: 0.4pt solid black;
}
td, th {
border-right: 0.4pt solid black;
border-bottom: 0.4pt solid black;
}このように設定します。table に上と左の線を、各セルに右と下の線を引く、これを隙間なく並べると連続した罫線に見える、というものです。
この方法は Mozilla, Opera ではうまくいくのですが、IE だとどうしてもセルのすき間をなくすことができません。要するに
table {
border-spacing: 0;
}が効かないのです。
border-collapse: collapse で border
Win版IE, Mozilla, Opera で実現可能なことを確認しました。今のところ本命の方法です。
table {
border-collapse: collapse;
}
td, th {
border: 1px solid #606060;
}table には border を引かず、border-collapse で各セルの間にすき間を開けないことを明示します。border-spacing と違って今度は Win版IE 6 でも正しく機能します。
テキストブラウザでも見やすく
将来は分かりませんが、現在（2004-06）のところテキストブラウザは CSS には対応していません。ほんとは tty とかの media に対応した CSS の解釈をしてほしいところですが、そういうことはしてくれません。
ということは、上で上げた border プロパティを使った罫線のような見せ方はできないということを意味します。もちろん table 二段重ねで背景色を利用した罫線もダメ。つまり、HTML の border 属性以外に罫線を引く方法はないってことです。また、上の CSS を利用した方法は Netscape 4 などのレガシーブラウザでも使えない方法です。
そこで、より幅広いブラウザを考慮しようと思ったら <table border="1"> にした上で、CSS で好みの見た目を追加するという方法しかありません。これは HTML の属性なので table を使うたびにわざわざつけなければいけませんが、XHTML 1.1 でも廃止にはなっていないのでしばらくは安心して使える方法です。また、cellspacing も廃止されていないので、
<table border="1" cellspacing="0">にしておけばレガシーブラウザでもそれほどひどい見た目にはなりません。
毎回書くのはちょっと面倒くさいですが。