セル内容の整列

since: 31st/Aug./2001; last modified: 19th/Sep./2001

テーブルのセルは th 要素と td 要素で表現します。このセル内容の水平位置と垂直位置を調整できます。

align = ("left" | "center" | "right" | "justify" | "char")
char = character
charoff = length
valign = ("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>
abc abc abc
abc abc abc
abc abc abc

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
     0.110
  1011
   101.10

I.E.5.5, Netscape6.1 でも align="char" は反映しません。

valign 属性の例

baselinebaseline topbottommiddle

baseline

First 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 とはなんだろうか」を参照ください。


Copyright © 2001, SUGAI, Manabu. All rights reserved. 著作権は放棄していません。
SEO [PR] ”š‘¬!–³—¿ƒuƒƒO –³—¿ƒz[ƒ€ƒy[ƒWŠJÝ –³—¿ƒ‰ƒCƒu•ú‘—