表を作る

「表」を作ることによって，文字や文章を規則的に並べて表すことができます．

基本的な表の作り方は次の通りです．

1. <TABLE> によって表の始まりを表します．
2. 次に，<TR> によって横一行の始まりを，終わりを </TR> で表し，この間に横一行の内容を記述します．
3. 表の項目に当たる部分は，<TH> と </TH> の間に書きます．
4. 表の内容となる部分は， <TD> と </TD> の間に書きます．
5. 最後に </TABLE> によって表の終わりを表します．

例えば，次のように書きます．

<TABLE>

<TR> <TH>行＼列</TH><TH>第一列</TH><TH>第二列</TH> </TR>

<TR> <TH>第一行</TH><TD>一行一列</TD><TD>一行二列</TD> </TR>

<TR> <TH>第二行</TH><TD>二行一列</TD><TD>二行二列</TD> </TR>

</TABLE>

この場合は，次のように表示されます．

行＼列	第一列	第二列
第一行	一行一列	一行二列
第二行	二行一列	二行二列

このように， <TH> と </TH> の間の部分は見出しとして扱われ，太い字になります．

幾つかのオプションを用いることによって，様々な効果を表に与えることができます．

表に枠を付けることができます．

表の開始要素のオプションとして，「 border="1"」として表を作ると，外枠が表示されます．

例えば，<TABLE border="1"> と指定した場合，

行＼列	第一列	第二列
第一行	一行一列	一行二列
第二行	二行一列	二行二列

表に題をつけることができます．

表の要素，<TABLE> と </TABLE> の間に，<CAPTION> と </CAPTION> で囲んで書きます．

例えば，上記の例において，<CAPTION>表のキャプション</CAPTION> のようにすると，

表のキャプション

行＼列	第一列	第二列
第一行	一行一列	一行二列
第二行	二行一列	二行二列

表の枡目を縦方向に複数連結する設定ができます．

TH または TD の開始要素のオプションとして，「rowspan="（数値）"」の様に指定します．

例えば，最初の一列を連結する場合，次のように書きます．
ここで注意するのは，オプションはまとめたい最初の要素にだけ指定し，その後の部分では，まとめられて吸収される要素は削除しておきます．

<TABLE border="1">

<TR> <TH rowspan="3">行＼列</TH><TH>第一列</TH><TH>第二列</TH> </TR>

<TR><TD>一行一列</TD><TD>一行二列</TD> </TR>

<TR><TD>二行一列</TD><TD>二行二列</TD> </TR>

</TABLE>

この場合は，次のように表示されます．

行＼列	第一列	第二列
	一行一列	一行二列
	二行一列	二行二列

表の枡目を横方向に複数連結する設定ができます．

TH または TD の開始要素のオプションとして，「colspan="（数値）"」の様に指定します．

例えば，最初の一行を連結する場合，次のように書きます．
ここで注意するのは，オプションはまとめたい最初の要素にだけ指定し，その後の部分では，まとめられて吸収される要素は削除しておきます．

<TABLE border="1">

<TR><TH colspan="3">行＼列</TH>

<TR><TH>第一行</TH><TD>一行一列</TD><TD>一行二列</TD> </TR>

<TR><TH>第二行</TH><TD>二行一列</TD><TD>二行二列</TD> </TR>

</TABLE>

この場合は，次のように表示されます．

行＼列
第一行	一行一列	一行二列
第二行	二行一列	二行二列

新しいページを作り，表の書き方を用いて自分の時間割を作成しましょう．ファイル名は「renshu3.html」とします．
他のページからこのページへのリンクは適宜作成しておくこと．

表を幾つかの構造に分けて取り扱うことができます．こうすると，各構造ごとに様々な設定をすることができます．

表の行をヘッダ，ボディー，フッタというグループに分けて扱えるようにします．

要素	説明	書式
<THEAD>～</THEAD>	表のヘッダ部分を表し，表ごとに一つだけ設定できる．	行単位（<TR>～</TR>）で指定します．また，THEADとTFOOTは，TBODYより前に記述します．
<TFOOT>～</TFOOT>	表のフッタ部分を表し，表ごとに一つだけ設定できる．
<TBODY>～</TBODY>	表の本体部分を表し，一つの表中に複数指定できる．

例えば次のように書きます．（「style」オプションについては後に出てくるスタイルシートのところを参照）

<TABLE border="1">

<THEAD style="background-color:#FFFF00">

<TR>

<TD>期間</TD>

<TD>売り上げ（万円）</TD>

<TD>利益率（％）</TD>

</TR>

</THEAD>

<TFOOT style="background-color:#FFFF00">

<TR>

<TD>平均</TD>

<TD>491.5</TD>

<TD>18.1</TD>

</TR>

</TFOOT>

<TBODY>

<TR>

<TD>第一四半期</TD>

<TD>423</TD>

<TD>20</TD>

</TR>

<TR>

<TD>第二四半期</TD>

<TD>652</TD>

<TD>15</TD>

</TR>

<TR>

<TD>第三四半期</TD>

<TD>344</TD>

<TD>25</TD>

</TR>

<TR>

<TD>第四四半期</TD>

<TD>547</TD>

<TD>16</TD>

</TR>

</TBODY>

</TABLE>

この場合は，以下のようになります．

期間	売り上げ（万円）	利益率（％）
平均	491.5	18.1
第一四半期	423	20
第ニ四半期	652	15
第三四半期	344	25
第四四半期	547	16

表の列をグループに分けて扱えるようにします．

<TABLE> 要素のすぐ後に続けて，<COLGROUP span="（数値）">～</COLGROUP>の様に記述します．数値にはグループ化する列数が入ります．
また，複数のグループ化した列のそれぞれに属性を指定したい場合は，<COL span="（数値）">要素によって，<COLGROUP>要素の間に記述します．

例えば，次のように記述します．

<TABLE border="1">

<COLGROUP span="1" style="background-color:#FFFF88">
</COLGROUP>

<COLGROUP span="2">

<COL span="1">
<COL span="1" style="background-color:#FFFF88">

</COLGROUP>

<TR>

<TH>期間</TH>
<TH>売り上げ</TH>
<TH>利益率</TH>

</TR>

dammy

<TR>

<TD>第一四半期</TD>
<TD>423</TD>
<TD>20</TD>

</TR>

dammy

<TR>

<TD>第ニ四半期</TD>
<TD>652</TD>
<TD>15</TD>

</TR>

dammy

<TR>

<TD>第三四半期</TD>
<TD>344</TD>
<TD>25</TD>

</TR>

dammy

<TR>

<TD>第四四半期</TD>
<TD>547</TD>
<TD>16</TD>

</TR>

dammy

<TR>

<TD>平均</TD>
<TD>491.5</TD>
<TD>18.1</TD>

</TR>

dammy

</TABLE>

dammy

この場合，次のように表示されます．

期間	売り上げ	利益率
第一四半期	423	20
第ニ四半期	652	15
第三四半期	344	25
第四四半期	547	16
平均	491.5	18.1