since: 31st/Aug./2001; last modified: 19th/Sep./2001
テーブルのセルは th 要素と td 要素で表現します。このセル内容の水平位置と垂直位置を調整できます。
align = ("left" | "center" | "right" | "justify" | "char")left: 初期値。左揃え。center: 中央揃え。right: 右揃え。justify: 均等割付。char: 特定文字揃え。
char 属性で指定する。charoff 属性で与えることができる。char = characteralign="char" が指定されている場合に、テキスト中の単一文字を配置の軸として機能させることを指定する。xml:lang 属性で設定された現在の言語における小数点である。charoff = lengthchar 属性が指定されていれば、各行における最初の桁揃え文字のオフセットを指定する。charoff 属性を桁揃え文字のオフセットに用いる場合、オフセットする方向は、 dir 属性で設定される現在のテキスト方向に依存する。
dir="ltr"（左-右方向）の場合、左マージンからオフセットする。dir="rtl" （右-左方向）では、右マージンからオフセットする。valign = ("top" | "middle" | "bottom" | "baseline")top: 上端揃え。middle: 中央揃え。bottom: 下端揃え。baseline: ベースライン揃え。
これらの属性は、セルをあらわす th, td 属性に与えられます。その親要素である、行要素 (tr) 、行グループ要素 (thead, tfoot, tbody) 、列グループ要素 (colgroup, col) でも定義されており、これらの要素で一度指定すると、その内容に現れる全ての子孫要素のセル内で、内容が揃えられます。
<td align="right"> ...当該セル内の文字列揃いが、align="right" に 指定される。 </td>
<tr align="right"> ...当該行内の全ての th, td 要素の文字列揃いが、 align="right" に指定される。 </tr>
<tbody align="center"> ...当該行グループ内の全ての th, td 要素の文字列 揃いが、align="center" に指定される。 </tbody>
<colgroup span="3" valign="middle"> ...当該列グループ内の三つの列全ての th, td 要素 の垂直方文字列揃いが、valign="middle" に指定 される。 </colgroup>
<col span="3" valign="baseline" /> ...当該属性共有列内の三つの列全ての th, td 要素 の垂直方向文字列揃いが、valign="baseline" に 指定される。
親要素での属性指定は、子孫要素での当該属性指定によって上書きされます：
<tbody align="center"> <tr>...この行は中央寄せ</tr> <tr align="left">...この行は左寄せ</tr> <tr>...この行は中央寄せ</tr> </tbody>
因みに、これらの属性は table 要素には定義されていません。次の例は、 XHTML 1.1 としては誤りです：
<table summary="間違ったテーブル" align="right"> ...この記述は誤りです。 </table>
上記の誤りは、 HTML 4 Transitional では許され、テーブル全体が浮動化して、右端に移動します。セル内の文字列揃いには全く影響しません。 XHTML 1.1 では、要素の不動化は、スタイルシートで実現します。
align 属性の例| ソース例 | 表示例 | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|
<table summary="align属性の例" border="1"> <col span="3" width="50" /> <tr align="right"> <td>abc</td> <td>abc</td> <td>abc</td> </tr><tr align="center"> <td>abc</td> <td>abc</td> <td>abc</td> </tr><tr align="justify"> <td>abc</td> <td>abc</td> <td>abc</td> </tr> </table> |
|
I.E.5.5, Netscape6.1 でも align="justify" は反映しません。
char 属性の例| ソース例 | 表示例 | 表示概念図 | |||
|---|---|---|---|---|---|
<table summary="charの例"
align="char" char="." offset="10">
<tr>
<td>0.110</td>
</tr><tr>
<td>1011</td>
</tr><tr>
<td>101.10</td>
</tr>
</table>
|
|
0.110
1011
101.10
|
I.E.5.5, Netscape6.1 でも align="char" は反映しません。
valign 属性の例| baseline | baseline | top | bottom | middle |
|---|---|---|---|---|
baselineFirst the cells that are aligned on their baseline are positioned. This will establish the baseline of the row. Next the cells with 'vertical-align: top' are positioned. |
This will establish the baseline of the row. Next the cells with 'vertical-align: top' are positioned. | top | bottom | middle |
わかりにくいかもしれませんが、 valign="baseline" が指定されている最初の二つのセルでは、文字の大きさによらず、一行目のベースラインが揃っています。
XHTML は文書の意味的構造をマークアップで示すためのものです。また、ネットワーク文書である為、様々な環境での閲覧が想定されます。そのための設計をユニバーサルデザインと呼びます。
この観点では、当該文書の非閲覧内容と、そのプレゼンテーション方法の指定は、分離するように強く推奨されます。したがって、 XHTML のマークアップで見栄えを指定することは強く戒められ、スタイルシートの利用が推奨されます。
スタイルシートは見栄え情報を指定する仕組みであり、現状では CSS が最も普及しており、 XSL も普及の兆しを見せています。 CSS では、 XHTML のマークアップでは実現できない、木目細かい指定をできます。 CSS の概要は本稿付録「CSS」を参照ください。詳細に関しては、 「CSS とはなんだろうか」を参照ください。