<<PREV | TOP | NEXT>>

CSS によるセル内の文字列揃え

last modified 23rd/Oct. 2000

'text-align'

CSS では、水平方向のテキスト揃えを 'text-align'プロパティで指定します。

text-alignleft | right | center | justify | <string> | inherit

<string> は引用符付きの任意の文字列で、表のセル内の文字列を、指定した文字を基準（軸）にして揃えます。

td { text-align: "." }

<table>
<colgroup>
  <col width="40">
</colgroup>
  <tr> <td> 1.30   </th> </tr>
  <tr> <td> 2.50   </th> </tr>
  <tr> <td> 10.80  </th> </tr>
  <tr> <td> 111.01 </th> </tr>
  <tr> <td> 85.    </th> </tr>
  <tr> <td> 90     </th> </tr>
  <tr> <td> .05    </th> </tr>
  <tr> <td> .06    </th> </tr>
</table>

表示例；

1.30
2.50
10.80
111.01
85.
90
.05
.06

'vertical-align'

CSS では、各セルには、ベースライン、上線、中心線、下線が存在すると考えます。 'vertical-align' プロパティは、これらのセルの基準線と、行についての基準線とを揃えるように働きます。。

vertical-alignbaseline | sub | super | top | text-top | middle | bottom | text-bottom | <length> | <%> | inherit

負値が許され、正は上へ、負は下へずらします。

baseline
セルのベースラインを、そのセルが含まれている先頭の行のベースラインに揃えます。
top
セルボックスの上線を、そのセルが含まれている先頭行の上線と揃えます。
bottom
セルボックスの下線を、そのセルが含まれている最終行の下線と揃えます。
middle
セルの中心線を、そのセルが含まれている行全体の中心線と揃えます。
sub、super、text-top、text-bottom
これらの値はセル要素に対して効果を現さず、代わりにベースライン揃えになります。
<%>
  • この値と、 line-height の値を掛けた大きさだけずらします。
  • 0% で baseline と一致します。

表示例；

baselinebaselinetopbottommiddle

Text

The first cell is aligned with the row baseline.

Text

The second cell is also aligned with the row baseline.		 The third cell is aligned with the top of the row. The fourth cell is aligned with the row bottom. The fifth cell is aligned with the row middle.

第１列めと第２列目がベースライン揃えに指定されている。 其々のセルの第一行 "Text" の下端線が揃って表示されるように指定してある。この下端線が、この行におけるベースラインです。ここでは、第２列目のベースラインが、当該行のベースラインとして採用される。第１列目のベースラインは、このラインに揃えられる。第１列目のベースラインを採用すると、第２列目が適切に表示出来ないと云うことに注意しましょう。

TABLE の行内にベースライン揃えを指定されたセルが無ければ、当該行にベースラインは存在しないと云うことにも注意されたい。

<<PREV | TOP | NEXT>>

FC2> モビット