※ここの解説は、後になるほど省略されている場合がありますのでできるだけ順番に読んでください。
■ 6.表(テーブル)の作成
次に表作成の説明をします。
表の使用は、いろいろな応用範囲があります。
- 一覧表などに使用する。
- 文字形式で一覧表を作成したり、画像をサムネイルにした時の一覧表など最も一般的な使用方法です。
- ページのレイアウトに使用する。
- 段落や字下げ文字の回り込みなどを使用してもレイアウトがどうもしっくりこない場合などに使用します。
- 一部の人たちに、「レイアウトをするために表を使用するべきではない」との意見がありますが、ページ全体のバランスを考えたときどうしても表組みを行ったほうが簡単でレイアウトがきれいにまとまる場合があります。
- 私はなんでも表にしたほうが良いというわけではありませんが、レイアウトを整える場合、簡単で自由度の高い表組みを使用しない手はないと考えます。
- ページの飾り付け、デザインに使用する。
- 背景色を簡単に指定できたり、ある文章を囲ったり、字下げに使用したり、ページを分割したりと応用範囲は広がります。
以上のようなことからも表組みは、結構重要だと思いますので、この際しっかりと覚えておきましょう。
■ 表組みの基本
表は、次のようなタグで構成されます。
- 【記述サンプル】
- <TABLE> (表の始まり) <CAPTION></CAPTION> (表題の始まりと終わり) <TBODY> (表組みの始まり) <TR> (行の始まり) <TH></TH> (見出し列の始まりと終わり) </TR> (行の終わり) <TR> (行の始まり) <TD></TD> (明細列の始まりと終わり) </TR> (行の終わり) </TBODY> (表組みの終わり) </TABLE> (表の終わり)
それぞれの開始タグと終了タグは、必ず入れ子で記述します。
THタグの場合は、記述した文字が自動的に太字になります。
主に見出しなどに使用します。
また、ひとつひとつの列のことをセルと言います。
それでは、実際の表組みの記述を見てみましょう。
■ テーブル(表)のサンプル
見出しセル |
---|
明細セル |
- 【記述サンプル】
-
<TABLE border="1">
<CAPTION>【表 題】</CAPTION>
<TBODY>
<TR>
<TH>見出しセル</TH>
</TR>
<TR>
<TD>明細セル</TD>
</TR>
</TBODY>
</TABLE>
※スタイルシートやスタイル属性の詳しい説明は、「HTMLの解説」−「15.スタイルシート」や「HTMLの解説」−「14.スタイル属性」を参照してください。
「TABLE」タグも同様で、HTML4.01に準拠するなら、上記の記述は次のような記述に変更してください。
<TABLE style="border: 1px outset #cccccc;"> <CAPTION>【表 題】</CAPTION> <TBODY> <TR> <TH style="border: 1px inset #cccccc;">見出しセル</TH> </TR> <TR> <TD style="border: 1px inset #cccccc;">明細セル</TD> </TR> </TBODY> </TABLE>
詳しくは「HTMLの解説」−「14.スタイル属性」、「15.スタイルシート」をご参照下さい。
<TABLE style="border: 1px outset #cccccc;"> <CAPTION>【表 題】</CAPTION> <TBODY> <TR> <TH style="border: 1px inset #cccccc;">見出しセル</TH> </TR> <TR> <TD style="border: 1px inset #cccccc;">明細セル</TD> </TR> </TBODY> </TABLE>
詳しくは「HTMLの解説」−「14.スタイル属性」、「15.スタイルシート」をご参照下さい。
※TABLEタグに記述されている属性は、後ほど詳しく説明いたします。
次にいろんな表組みを行ったときのタグの記述を見ていきましょう。
■ テーブル(表)の記述サンプル
「TABLE」タグの「border」属性はHTML4.01で推奨されていません。
したがって、これまでのサンプルはスタイル属性を使用した記述に変更しました。
詳しくは「HTMLの解説」−「14.スタイル属性」、「15.スタイルシート」をご参照下さい。
したがって、これまでのサンプルはスタイル属性を使用した記述に変更しました。
詳しくは「HTMLの解説」−「14.スタイル属性」、「15.スタイルシート」をご参照下さい。
<TABLE> <TR> <TD></TD> </TR> </TABLE> |
<TABLE> <TR> <TD></TD> <TD></TD> </TR> </TABLE> |
|||||||
<TABLE> <TR> <TD></TD> </TR> <TR> <TD></TD> </TR> </TABLE> |
<TABLE> <TR> <TD></TD> <TD></TD> </TR> <TR> <TD></TD> <TD></TD> </TR> </TABLE> |
|||||||
<TABLE> <TR> <TD COLSPAN="2"></TD> </TR> <TR> <TD></TD> <TD></TD> </TR> </TABLE> |
<TABLE> <TR> <TD ROWSPAN="2"></TD> <TD></TD> </TR> <TR> <TD></TD> </TR> </TABLE> |
|||||||
<TABLE> <TR> <TD></TD> <TD></TD> </TR> <TR> <TD COLSPAN="2"></TD> </TR> </TABLE> |
<TABLE> <TR> <TD></TD> <TD ROWSPAN="2"></TD> </TR> <TR> <TD></TD> </TR> </TABLE> |
上記の記述で、TDタグのCOLSPAN属性及びROWSPAN属性は、セルを結合する時に使用します。
COLSPAN属性は、そのセルから右方向に結合するセル数を指定します。
ROWSPAN属性は、そのセルから下方向に結合するセル数を指定します。
これらを使用すると、次のような表も作成できます。
|
|