表の表示形式をアレンジする

HTML5廃止要素
<TABLE border="*" width="*" cellspacing="*" cellpadding="*" summary="(表の解説)">……</TABLE>

 TABLE要素にもいくつか規定することの出来る属性があります。border属性で表の外枠線の太さを、width属性で表の幅を、cellspacing属性でセル同士の間隔(≒内側の線の幅)、cellpadding属性でセル内の余白を、summary属性でその表が何を説明するための表なのかを表します。*はすべてピクセル数(単位はつけなくてよい)で記し、当然数値が大きくなるほど太くなります。

 これらの要素のうち、summary属性は一般的なブラウザにおいて画面に表示されることはありません。それ以外の要素はすべて画面表示に影響を及ぼします。なお、cellspacingとcellpaddingはごっちゃになりやすいので、ここでまとめて確実に暗記してしまいましょう。border="0"の場合は表の内側の罫線も表示されなくなりますが、cellspacing="0"の場合でborderが0じゃない場合は、内罫線も表示されるようになっていますので注意が必要です。。

 余談ですが、TABLE要素にheight属性はあるにはありますが、HTML4.01では定義されていないこと、ブラウザのサイズ等の関係で肝心要の内容が表示されないことがありうるなどの問題が発生しないことから、設定しないようにしましょう。

 なお、HTML5ではこのうちborder属性以外はすべて廃止になり、そのborder属性でも「枠線を表示する」という意味で1のみ設定可能になっています。

非推奨の要素<TABLE bgcolor="#RRGGBB" background="(URL)" align="( left | center | right )">……</TABLE>

 bgcolor属性で表の背景色を、background属性で表の壁紙を設定します。ただし、bgcolor属性は非推奨、background属性にいたってはHTML4.01規格外になっていますので、慣れてきたら設定はスタイルシートに頼った方がよさそうです。

 また、align属性で表の配置位置を設定します。ここでleftかrightを選ぶと、表の右や左に文章が回りこむようになっています。centerを選んだ場合は表が中央寄せになります(テキストの回りこみなし)。

HTML5における表の枠線の表し方

 HTML5では先述の通り表の枠線その他もろもろはスタイルシートに、HTMLタグではダメよ、となりました。では具体的にどう代替表示すればいいのかという話になりますが……

とりあえずこの表をモデルにしましょう。表のスケールは大枠の枠線4px、各セルの枠線1pxとしまして、どちらも色は黒としますが……

表題1 表題2 表題3
中身1-1 中身1-2 中身1-3
中身2-1 中身2-2 中身2-3

table{border:4px solid black;}
th,td{border:1px solid black;}

というのをあらかじめスタイルシートとして放り込むことになります。