Section 12 : 複雑な表組

　<TR>，<TD>，<TH> の属性で表の細部の設計を指定する。<TD>，<TH> でのみ指定できるものと，<TR> でも指定できるものがある。そうとう入り組んだ表組だって，その気になればできる。

セル内の配置

　まず，<TR>，<TD>，<TH> のいずれにも指定できる属性。<TR> で指定した場合はその列全体に，<TD>，<TH> に指定した場合はそのセルにのみ有効となる。

<TR>，<TD>，<TH> の属性
属性値解説
ALIGN キーワード 表のセルまたは列の行配置の指定。
VALIGN キーワード 表のセルまたは列の縦配置の指定。

　ALIGN 属性のキーワードは次のとおり。

left
左寄せ。
right
右寄せ。
center
中央揃え。
justify
均等割付け。文字列を列幅に合わせて均等に配置。
char
ピリオドやカンマをセル内の桁揃えのための基準にするもの。Yes, we love HTML の Section 5 で詳しく解説する。

　いっぽう，VALIGN-属性のキーワードは次の 4 つから指定する。

top
上に詰める。
bottom
下に詰める。
middle
中央に配置する。ALIGN 属性の center と混同しないように。
baseline
セルが含まれる行では，各セルの最初の文字のベースラインを揃える。

<TABLE BORDER>
<TR ALIGN="center">
<TD ALIGN="left">left</TD>
<TD>この列は特に指定しない限り<BR>center</TD>
<TD ALIGN="right">right</TD>
</TR>
<TR>
<TD>縦の配置を<BR>見てください。</TD>
<TD VALIGN="top">top</TD>
<TD VALIGN="bottom">bottom</TD>
</TR>
</TABLE>

left この列は特に指定しない限り
center		 right
縦の配置を
見てください。		 top bottom

もっと複雑な表を組む

　それから，<TD>，<TH> でのみ指定できるセルをまとめる属性。

<TD>，<TH> の属性
属性値解説
COLSPAN 数値 横方向にいくつかのセルをまとめて 1 つのセルにする。
ROWSPAN 数値 縦方向にいくつかのセルをまとめて 1 つのセルにする。

　それでは例を見ていただこう。

<TABLE BORDER>
<TR>
<TD>ROWSPAN と COLSPAN を使います。</TD>
<TD COLSPAN="2">2 つのセルをつなげます。</TD>
</TR>
<TR>
<TD ROWSPAN="2">縦につなげる場合，それ以降の行の記述に注意してください。</TD>
<TD>中央のセル</TD>
<TD>右のセル</TD>
</TR>
<TR>
<TD>中央のセル</TD>
<TD>右のセル</TD>
</TR>
</TABLE>

ROWSPAN と COLSPAN を使います。 2 つのセルをつなげます。
縦につなげる場合，それ以降の行の
記述に注意してください。		 中央のセル 右のセル
中央のセル 右のセル

　さらに，Section 9 で使った表を使って，セルをまとめることを掘り下げてみよう。

　峠の釜めしの特徴の欄を 2 つにする。“峠の釜めし”“横川”“信越本線”の各セルは“特徴”にある縦２つのセルをまとめたものになるので，それぞれに ROWSPAN="2" を挿入する。“長野新幹線...”の行は，セル 1 個だけの行になる。

いっぽう，“あなごめし”の販売駅と路線のセルを 1 つにまとめるために COLSPAN="2" とする。この行にはセル 3 つでよい。

<TABLE BORDER>
<TR><TH>駅弁</TH><TH>販売駅</TH><TH>路線</TH><TH>特徴</TH><TR>
<TR><TH ROWSPAN="2">峠の釜めし</TH><TD ROWSPAN="2">横川</TD>
<TD ROWSPAN="2">信越本線</TD><TD>益子焼の容器に山菜などがどっさり。</TD></TR>
<TR><TD>長野新幹線開業により横川駅での販売数は減少。</TD></TR>
<TR><TH>ますのすし</TH><TD>富山</TD><TD>北陸本線</TD><TD>円形の器いっぱいに敷きつめらた「ます」が好評。</TD></TR>
<TR><TH ROWSPAN="3">柿の葉寿司</TH><TD ROWSPAN="3">和歌山</TD><TD>紀勢本線</TD><TD ROWSPAN="3">ひとつひとつが柿の葉っぱにくるまれている。</TD></TR>
<TR><TD>阪和線</TD></TR>
<TR><TD>和歌山線</TD></TR>
<TR><TH>あなごめし</TH><TD COLSPAN="2">高松・今治・松山など</TD><TD>瀬戸内の絶品のあなごが楽しめる。</TD></TR>
<TABLE>

駅弁販売駅路線特徴
峠の釜めし横川信越本線益子焼の容器に山菜などがどっさり。
長野新幹線開業により横川駅での販売数は減少。
ますのすし富山北陸本線円形の器いっぱいに敷きつめらた「ます」が好評。
柿の葉寿司和歌山紀勢本線ひとつひとつが柿の葉っぱにくるまれている。
阪和線
和歌山線
あなごめし高松・今治・松山など瀬戸内の絶品のあなごが楽しめる。

　縦にいくつかのセルをまとめる場合の ROWSPAN 属性を記述する位置や，その後の記述に注意してほしい。また，表についてかなり細かく指定することもできるが，矛盾を生じさせてはいけない。

◆Summary

　ALIGN，VALIGN 属性でセルに入る文字や画像の配置を指定できる。また，ROWSPAN ，COLSPAN 属性を使っていくつかのセルをまとめて複雑な表を作ることもできる。

Next:
Prev:
Up: 目次(X)