Section 5 : 表組(5) ― 行揃え

表の中にはさまざまなデータが入りうる。このとき,セル中の行揃えが問題になることも多い。

ALIGN,VALIGN 属性

 Try next HTML の Section 12 でも紹介したように,<TR><TD><TH> には ALIGN 属性VALIGN 属性を指定してセル内の文字の配置を決めることができた。

セル内文字配置の属性
属性 解説
ALIGN キーワード セル内の文字の配置。キーワードは,left(左詰め),right(右詰め),center(センタリング),justify(均等割付け),char(小数点揃え)。
VALIGN キーワード セル内の文字の垂直配置。キーワードは,top(上寄せ),bottom(下寄せ),middle(中央寄せ),baseline(ベースライン揃え)。

これは,<TR><TD><TH> だけでなく,<THEAD><TFOOT><TBODY><COL><COLGROUP> にも指定できる。ということは,<COL><COLGROUP> で ALIGN 属性を指定しておけば,それはその列すべてに有効になり,<TD> などにいちいち指定しなくてもよいということになる。

 また,ここで考えなくてはならないのは,ALIGN,VALIGN 属性がいくつかの要素で同時に指定されたときどんな優先順位で指定が採用されるかということである。これは,次のように決められている。

■ ALIGN 属性

  1. セル内で指定されたもの。
  2. その <TD><TH> で指定されたもの。
  3. そのセルと関係する <COL><COLGROUP> で指定されたもの。
  4. そのセルが含まれる <TR><THEAD><TFOOT><TBODY> で指定されたもの。

■ VALIGN 属性

  1. セル内で指定されたもの。
  2. その <TD><TH> で指定されたもの。
  3. そのセルが含まれる <TR><THEAD><TFOOT><TBODY> で指定されたもの。
  4. そのセルと関係する <COL><COLGROUP> で指定されたもの。

 水平方向の配置は列が,垂直方向の配置は行が優先されるというのは直観的に納得がいく。

小数点揃え

 今までとくに詳しく触れなかったのが,表組で ALIGN="char" を指定した場合である。これはセル中に含まれるある文字を基準に配置を決める。この場合,次の属性が指定できる。

小数点揃えの属性
属性 解説
CHAR 文字 揃える基準になる文字(1 文字)を指定する。既定値はその言語の“小数点”。
CHAROFF ピクセル
パーセント
揃える基準の文字のオフセット位置。

 行揃えに使われる文字は小数点である必要はないが,多くの場合小数点で揃えるであろうから, ここでは“小数点揃え”と呼ぶことにする。

 次のような表を作ってみよう。

<TABLE BORDER RULES="groups">
  <CAPTION>平方根表</CAPTION>
  <COLGROUP ALIGN="right"></COLGROUP>
  <COLGROUP ALIGN="char" CHAR="."></COLGROUP>
  <THEAD>
    <TR><TH>数</TH><TH>平方根</TH></TR>
  <TBODY>
    <TR><TD>1</TD><TD>1</TD></TR>
    <TR><TD>2</TD><TD>1.41421</TD></TR>
    <TR><TD>3</TD><TD>1.73205</TD></TR>
    <TR><TD>4</TD><TD>2</TD></TR>
    <TR><TD>5</TD><TD>2.23607</TD></TR>
</TABLE>

この出力は,以下のようになる。

平方根表
平方根
11
21.41421
31.73205
42
52.23607

 小数点揃えをしたときに,行揃えの基準になる文字が 1 つのセルに 2 つ以上出てきたときの結果は定義されていないので注意が必要である。また,ALIGN="char" はとくにブラウザがサポートしていなくても構わないとされている。そのようなブラウザでは,ALIGN="char" を使用した結果は不定である。

 IE3/4/5/5.5, NN4  ALIGN="char" はサポートされない。