トップ ＜ 応用編
テーブル <TABLE>
表組み   ページのレイアウトなどに頻繁に利用されます。


  • 基本のテーブル

    <TABLE>※テーブル始まり

    --1行目--
      <TR>※セルの改行

        <TD>セル</TD>  ←1列目

    ※<TD></TD>で囲まれたところを、「セル」と呼びます。
        セルの中に内容を書きます。

        <TD>セル</TD>  ←2列目

      </TR>
    --1行目終わり--

    --2行目--
      <TR>
        <TD>セル</TD>
        <TD>セル</TD>
      </TR>
    --2行目終わり--

    </TABLE>※テーブル終わり
 ←列→
  1列目2列目
↑
行
↓		1
行
目
セルセル
セル セル
2
行
目


  • 複数列にまたがるテーブル

    <TABLE>

    --1行目--
      <TR>
        <TD>1番目のセル</TD>
        <TD>2番目のセル</TD>
      </TR>
    --1行目終わり--

    --2行目--
      <TR>
        <TD COLSPAN="列数">
        ※COLSPAN=セルが複数列に渡るとき使います
        複数列にまたがるセル
        </TD>
      </TR>
    --2行目終わり--

    </TABLE>
1番目のセル 2番目のセル
複数列にまたがるセル


  • 複数行にまたがるテーブル

    <TABLE>

    --1行目--
      <TR>
        <TD>1番目のセル</TD>
        <TD ROWSPAN="列数">
        ※ROWSPAN=セルが複数行に渡るとき使います
        複数行にまたがるセル
        </TD>
      </TR>
    --1行目終わり--

    --2行目--
      <TR>
        <TD>3番目のセル</TD>
      </TR>
    --2行目終わり--

    </TABLE>
  1列目2列目
1
行
目
1番目のセル 複数行に
またがるセル
3番目のセル
2
行
目



テーブル関連のタグ
上位 タグ、タグオプション 説明
  <TABLE></TABLE>テーブル
<TH></TH>テーブルの見出し
<TD></TD>テーブルのセル
<TR></TR>テーブルの行
<CAPTION ALIGN="TOP/BOTTOM"></CAPTION>テーブルのタイトル
<TABLE> BORDER="ピクセル"テーブルの枠の太さ
CELLPADDING="数字"セルの枠の太さ
CELLSPACING="数字"セルの余白
<TH>,<TD>COLSPAN="行数"複数行にまたがる列
ROWSPAN="列数"複数列にまたがる行
NOWRAP改行禁止
BGCOLOR="#色コード"セルの背景色
<TABLE>,<TH>,<TD>WIDTH="ピクセル、%"列の幅
HEIGHT="ピクセル、%"列の高さ
<TH>,<TD>,<TR>ALIGN="LEFT/CENTER/RIGHT"横位置揃え
VALIGN="TOP/MIDDLE/BOTTOM"縦位置揃え



テーブル | フレーム | イメージマップ

トップ | 基礎編 | 応用編 | 実践編 | ステップアップ | 付録