Section 11 では,表を作るための基本事項を説明した。ここでは,表の体裁,とくに罫線について説明する。
Section 11 の例で作成した表は,罫線が引かれていなかっただろう。まず,表の罫線に関して,基本を解説する。
表の罫線は,表の見た目に関わる部分であるので,Section 1 で解説した XHTML の考え方と多少異なる。しかし,表の罫線は,表の構造を示す役割も持っているので,基本的な部分は XHTML で指定可能になっている。細かい部分は,スタイルシートで指定できる。しかし,2005 年 5 月現在,次世代 XHTML として策定中の XHTML 2.0 では,こういった記述はなくなる見通しである。
表の罫線に大きく関わるのは,table
要素の frame
属性,rules
属性および border
属性である。
frame
属性 frame
属性は,表の外枠に関して指定するものである。属性の値は,あらかじめ決められた語(キーワード)であり,次にあげるものから 1 つを選ぶ。
void
above
below
hsides
lhs
rhs
vsides
box
および border
rules
属性 rules
属性は,表のセル間の罫線について指定する。属性の値は,次のキーワードの中から 1 つである。
none
groups
rows
cols
all
border
属性 border
属性は,表の外枠の太さを指定する。値は数値で,単位はピクセルである。単位記号は不要である。
さて,表の罫線に関わる 3 つの属性を説明したが,これらは次のように関係している。
border
属性が 0 であるとき,frame
属性は void
とする。このとき,rules
属性が省略されていれば,none
とする。border
属性が指定されており,値が 0 でないとき,frame
属性が省略されていれば border
とする。また,rules
属性が省略されていれば,all
とする。border
属性が省略されているとき,frame
属性が省略されていれば void
とする。また,rules
属性が省略されていれば,none
とする。実際の指定にあたっては,古いブラウザとの互換性を考慮して,罫線を引く場合は border
属性を指定しておくとよい。また,(2005 年 5 月)現行のブラウザでも,属性を省略したときの振る舞いが(残念なことに上記どおりでなく)まちまちであるので,frame
,rules
および border
の 3 つの属性を指定しておくのが無難であるといえる。
Section 11 の例について,これを書き直して罫線のある表を出力させてみよう。
<table frame="box" rules="rows" border="1">
<tr>
<th>書名</th><th>出版社</th><th>ISBN コード</th><th>本体価</th>
</tr>
<tr>
<th>HTML 4.0 正攻法</th><td><a href="http://www.ai-pub.co.jp/">エーアイ出版</a></td><td>ISBN4-87193-659-7</td><td>2,800 円</td>
</tr>
<tr>
<th>わかる 使える インターネット&パソコン</th><td><a href="http://www.obunsha.co.jp/">旺文社</a></td><td>ISBN4-01-086131-2</td><td>1,500 円</td>
</tr>
</table>
これは,お手元の環境では次のように出力される。
書名 | 出版社 | ISBN コード | 本体価 |
---|---|---|---|
HTML 4.0 正攻法 | エーアイ出版 | ISBN4-87193-659-7 | 2,800 円 |
わかる 使える インターネット&パソコン | 旺文社 | ISBN4-01-086131-2 | 1,500 円 |
表の罫線について,もっと細かい指定をするには,行グループ・列グループについて知る必要がある。これについては Let's begin XHTML では省略する。また,表の罫線に関するスタイルシート(特に CSS)での指定方法は,CSS チュートリアルを参考にされたい。