セル内容の整列

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 = character

• align="char" が指定されている場合に、テキスト中の単一文字を配置の軸として機能させることを指定する。
• この属性のデフォルト値は、 xml:lang 属性で設定された現在の言語における小数点である。
• 小数点は、例えば英語ならピリオド "." であり、フランス語ならコンマ "," である。

charoff = length

• char 属性が指定されていれば、各行における最初の桁揃え文字のオフセットを指定する。
• 桁揃え文字を含まない行は、桁揃え位置の末尾に揃うよう、水平方向にシフトする必要がある。
• 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 属性の例

わかりにくいかもしれませんが、 valign="baseline" が指定されている最初の二つのセルでは、文字の大きさによらず、一行目のベースラインが揃っています。

スタイルシートの勧め

XHTML は文書の意味的構造をマークアップで示すためのものです。また、ネットワーク文書である為、様々な環境での閲覧が想定されます。そのための設計をユニバーサルデザインと呼びます。

この観点では、当該文書の非閲覧内容と、そのプレゼンテーション方法の指定は、分離するように強く推奨されます。したがって、 XHTML のマークアップで見栄えを指定することは強く戒められ、スタイルシートの利用が推奨されます。

スタイルシートは見栄え情報を指定する仕組みであり、現状では CSS が最も普及しており、 XSL も普及の兆しを見せています。 CSS では、 XHTML のマークアップでは実現できない、木目細かい指定をできます。 CSS の概要は本稿付録「CSS」を参照ください。詳細に関しては、 「CSS とはなんだろうか」を参照ください。