Let's begin XHTML―さあ始めよう XHTML

Section 12:表(2)

 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
holizontal sides。上下辺の外枠を描く。
lhs
left-hand side。左辺のみ外枠を描く。
rhs
right-hand side。右辺のみ外枠を描く。
vsides
vertical sides。左右辺の外枠を描く。
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 月)現行のブラウザでも,属性を省略したときの振る舞いが(残念なことに上記どおりでなく)まちまちであるので,framerules および 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-72,800 円
わかる 使える インターネット&パソコン旺文社ISBN4-01-086131-21,500 円

 表の罫線について,もっと細かい指定をするには,行グループ・列グループについて知る必要がある。これについては Let's begin XHTML では省略する。また,表の罫線に関するスタイルシート(特に CSS)での指定方法は,CSS チュートリアルを参考にされたい。