表組みはテーブルと呼ばれ、表の作成に便利なタグです。また、スタイルシートが開発される前から、レイアウトする上で重宝されて使われています。いまでも殆どの企業のサイト等では、トップページ等では表組みによって生成されています。そのような背景から、ＨＰを制作する上で表組みを使いこなせるようになると、とても表現力が増します。

【構文１１】
まずはじめに一番基本的な構文で説明します。

    [例５]
    １行１列 １行２列
    ２行１列 ２行２列
上のシンプルな２行２列で構成されている表は以下の構文で作成されています。
    [例５]
    <TABLE BORDER="1">
    <TR>
    <TD>１行１列</TD>
    <TD>１行２列</TD></TR>
    <TR>
    <TD>２行１列</TD>
    <TD>２行２列</TD></TR>
    </TABLE>
表組みはなかなかとっつきにくいのですが、以下の三点を覚えておくと理解が早まります。
1.<TABLE>〜</TABLE> ---- テーブルの宣言をする。
2.<TR>〜</TR> ---- 行の境界を設定する。
3.<TD>〜</TD> ---- 列の境界の設定、文字情報・画像情報をここに記す。

なお BORDER については表の枠の太さの指定です。指定を 0 にすると本来の表以外にもいろいろな活用が出来ます。以下に 0 と 10 の指定の対比を表します。

    [例６]　BORDER="0"
    [例７]　BORDER="10"
    １行１列 １行２列
    ２行１列 ２行２列
    １行１列 １行２列
    ２行１列 ２行２列

【構文１２】
次にセルの結合について、以下の二つのサンプルで説明します。

    [例８]
    [例８]
    光の三原色 赤
    緑
    青
    <TABLE BORDER="1">
    <TR><TD ROWSPAN="3">光の三原色</TD>
    <TD>赤</TD></TR>
    <TR><TD>緑</TD></TR>
    <TR><TD>青</TD></TR>
    </TABLE>


    [例９]
    [例９]
    光の三原色
    赤 緑 青
    <TABLE BORDER="1">
    <TR><TD COLSPAN="3">光の三原色</TD></TR>
    <TR>
    <TD>赤</TD>
    <TD>緑</TD>
    <TD>青</TD>
    </TR>
    </TABLE>
1.<TD ROWSPAN="縦方向にまたがるセル数">セルの内容</TD>
2.<TD COLSPAN="横方向にまたがるセル数">セルの内容</TD>
上記二つの構文を応用することにより、いろいろな表組みを制作することが出来ます。

【構文１３】
次に、表の枠線とセル内容との間隔を指定、各セル間の間隔の指定、セルの色、セルの幅と高さ等を定義します。

    [例１０]
    光の三原色 赤
    緑
    青
    [例１０]
    <TABLE BORDER="0" CELLPADDING="3" CELLSPACING="0">
    <TR><TD WIDTH="80" BGCOLOR="silver" ROWSPAN="3"ALIGN="CENTER">
    <FONT FACE="ＭＳ ゴシック" SIZE="2" COLOR="black"
    STYLE="FONT-SIZE: 12px" STYLE="LETTER-SPACING: 0px">光の三原色
    </FONT></STYLE>
    </TD>
    <TD WIDTH="30" HEIGHT="30" BGCOLOR="red"ALIGN="CENTER">
    <FONT FACE="ＭＳ ゴシック" SIZE="2" COLOR="white"
    STYLE="FONT-SIZE: 12px" STYLE="LETTER-SPACING: 0px">赤
    </FONT></STYLE>
    </TD></TR>
    <TR><TD WIDTH="30" HEIGHT="30" BGCOLOR="green"ALIGN="CENTER">
    <FONT FACE="ＭＳ ゴシック" SIZE="2" COLOR="white"
    STYLE="FONT-SIZE: 12px" STYLE="LETTER-SPACING: 0px">緑
    </FONT></STYLE>
    </TD></TR>
    <TR><TD WIDTH="30" HEIGHT="30" BGCOLOR="blue"ALIGN="CENTER">
    <FONT FACE="ＭＳ ゴシック" SIZE="2" COLOR="white"
    STYLE="FONT-SIZE: 12px" STYLE="LETTER-SPACING: 0px">青
    </FONT></STYLE>
    </TD></TR>
    </TABLE>
1.<TABLE CELLPADDING="ピクセル値"> ---- 表の枠線とセル内容との間隔を指定
2.<TABLE CELLSPACING="ピクセル値"> ---- 各セル間の間隔を指定
3.<TD BGCOLOR="RGB値"> ---- セルの色を指定
4.<TD WIDTH="ピクセル値、または％" HEIGHT="ピクセル値、または％"> ---- セルの幅と高さを指定
5.<TD ALIGN="LEFT|CENTER|RIGHT"> ---- セル内容の水平位置を指定（指定なしでは LEFT となる）
※<TD VALIGN="TOP|MIDDLE|BOTTOM"> ---- セル内容の垂直位置を指定（指定なしでは MIDDLE となる）