表の中にはさまざまなデータが入りうる。このとき,セル中の行揃えが問題になることも多い。
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="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>
この出力は,以下のようになる。
数 | 平方根 |
---|---|
1 | 1 |
2 | 1.41421 |
3 | 1.73205 |
4 | 2 |
5 | 2.23607 |
小数点揃えをしたときに,行揃えの基準になる文字が 1 つのセルに 2 つ以上出てきたときの結果は定義されていないので注意が必要である。また,ALIGN="char" はとくにブラウザがサポートしていなくても構わないとされている。そのようなブラウザでは,ALIGN="char" を使用した結果は不定である。
IE3/4/5/5.5, NN4 ALIGN="char" はサポートされない。