Section 8 で表組についての基本的な考え方がわかったら,実際に表を組んでみよう。表組は少し難しいといっても,ためらってちゃいけない。習うよりも,慣れが大事。
こんな表を組んでみよう。縦 5 行,横 4 列のふつうの表である。
駅弁 | 販売駅 | 路線 | 特徴 |
---|---|---|---|
峠の釜めし | 横川 | 信越本線 | 益子焼の容器に山菜などがどっさり。 |
ますのすし | 富山 | 北陸本線 | 円形の器いっぱいに敷きつめらた「ます」が好評。 |
柿の葉寿司 | 和歌山 | 紀勢本線 | ひとつひとつが柿の葉っぱにくるまれている。 |
あなごめし | 高松 | 予讃線 | 瀬戸内の絶品のあなごが楽しめる。 |
まず,“ここから”を書こう。罫線があるから,
<TABLE BORDER>
である。次に表題を入れよう。これは簡単。
<CAPTION>全国の名物駅弁</CAPTION>
さて,表の 1 行めを書く前に,“ここから表の 1 行”を書かなくてはならない。
<TR>
1 行めのセルはすべて見出しなので,中身はそれぞれ <TH>...</TH> でくくって,
<TH>駅弁</TH><TH>販売駅</TH><TH>路線</TH><TH>特徴</TH>
と書く。これで 1 行めは終わりなので,“ここまで表の 1 行”の
</TR>
を書こう。2 行めは,“見出しのセル”“通常のセル”が両方出てくる。“1行”の範囲を <TR>...</TR> で示すことに気をつけて,
<TR><TH>峠の釜めし</TH><TD>横川</TD><TD>信越本線</TD>
<TD>益子焼の容器に山菜などがどっさり。</TD></TR>
きちんと上の列と対応しているか確認しよう。同様に 3 行め以降も入力し,最後に“ここまで表組”の
</TABLE>
を忘れずに。できた原稿は次のようになるはず。
<TABLE BORDER>
<CAPTION>全国の名物駅弁</CAPTION>
<TR><TH>駅弁</TH><TH>販売駅</TH><TH>路線</TH><TH>特徴</TH></TR>
<TR><TH>峠の釜めし</TH><TD>横川</TD><TD>信越本線</TD>
<TD>益子焼の容器に山菜などがどっさり。</TD></TR>
<TR><TH>ますのすし</TH><TD>富山</TD><TD>北陸本線</TD><TD>円形の器いっぱいに敷きつめらた「ます」が好評。</TD></TR>
<TR><TH>柿の葉寿司</TH><TD>和歌山</TD><TD>紀勢本線</TD><TD>ひとつひとつが柿の葉っぱにくるまれている。</TD></TR>
<TR><TH>あなごめし</TH><TD>高松</TD><TD>予讃線</TD><TD>瀬戸内の絶品のあなごが楽しめる。</TD></TR>
</TABLE>
この出力は冒頭にあげたものである。
表にはたくさんの属性が用意されているが,まずは簡単な 2 つをあげておこう。
属性 | 値 | 解説 |
---|---|---|
SUMMARY | 文字列 | 音声出力などのために表の意図や構造を記述する。 |
WIDTH | ピクセル/パーセント | 表の横幅を指定する。 |
たとえば,横幅を表示領域の 50% に指定すると,
<TABLE BORDER WIDTH="50%"
SUMMARY="峠の釜めしなど全国の名物駅弁の紹介">
...
</TABLE>
表の印象は変わってくる。
駅弁 | 販売駅 | 路線 | 特徴 |
---|---|---|---|
峠の釜めし | 横川 | 信越本線 | 益子焼の容器に山菜などがどっさり。 |
ますのすし | 富山 | 北陸本線 | 円形の器いっぱいに敷きつめらた「ます」が好評。 |
柿の葉寿司 | 和歌山 | 紀勢本線 | ひとつひとつが柿の葉っぱにくるまれている。 |
あなごめし | 高松 | 予讃線 | 瀬戸内の絶品のあなごが楽しめる。 |
一般に,表の幅が狭くなると,セル内のテキストは自動的に改行される。
表組は <TD> と <TH> でセルを横に並べ,<TR> で行を縦に連ねていく。また,表の幅を指定したり要約などを記述できる。