5、3、変形テーブル


 このページではテーブルのネストイメージに額縁を付ける異なるセル幅と高さ等、テーブルの変わった使い方を説明します。

  1. テーブルのネスト

     <TABLE>・・・</TABLE> をネストすることにより、テーブルの中にテーブルを表示することができます。

    テーブルのネスト
    見出し1見出し2見出し3
    項目1項目2項目3

    記述方法
    <TABLE BORDER>
    <TD>
    ←必ず入れます。(内側のテーブルが外側のテーブルのセルになることを示します)
    <TABLE BORDER><CAPTION>テーブルのネスト</CAPTION>
    <TR>
    <TH>見出し1</TH><TH>見出し2</TH><TH>見出し3</TH>
    </TR>
    <TR>
    <TD>項目1</TD><TD>項目2</TD><TD>項目3</TD>
    </TR>
    </TABLE> </TABLE>

  2. イメージに額縁を付ける

     ネストしたテーブルのBORDERアトリビュートに外枠線の幅を指定することにより、 テーブルを額縁のように表示することができます。

    二重にテーブルで囲んだ場合です。

    記述方法
    <CENTER>
    <TABLE BORDER=5>
    <TD>
    ←必ず入れます。(内側のテーブルが外側のテーブルのセルになることを示します)
    <TABLE BORDER=3>
    <TD><IMG SRC="image.gif"></TD>
    </TABLE>
    </TABLE>
    二重にテーブルで囲んだ場合です。
    </CENTER>

  3. 異なるセル幅と高さ

     <TD>タグまたは<TH>タグにROWSPANアトリビュート,COLSPANアトリビュートを付けることで、 そのセルの幅または高さを指定することができます。

    要素1 要素2 要素3
    要素4 要素5 要素6 要素7
    要素8
    **
    要素9 要素10 要素11

    記述方法
    <TABLE BORDER=3>
    <TR>
    <TD ROWSPAN=3>要素1</TD>
    <TD COLSPAN=2>要素2</TD>
    <TD COLSPAN=2>要素3</TD>
    </TR>
    <TR>
    <TD>要素4</TD>
    <TD>要素5</TD>
    <TD>要素6</TD>
    <TD>要素7</TD>
    </TR>
    <TR>
    <TD>要素8<BR>**</TD>
    <TD>要素9</TD>
    <TD>要素10</TD>
    <TD>要素11</TD>
    </TR>
    </TABLE>


目次へ戻る次へ索引へ