TOP 基本タグ 小技タグ サンプル リンク
テーブルを作る
背景 見出し テキスト フォント 水平線 画像 リンク テーブル リスト フレーム

<TABLE>タグでテーブルを作成します。
テーブルは表を書く事にも使用しますし、ページのレイアウトにも使用できる便利なタグです。

[テーブルを作成する]



<TR> タグで行を定義します。
<TD> タグでセルを定義します。

（例）セルが一つの場合 
<TABLE>
 <TR>
  <TD>一行目のセル１</TD>
 </TR>
</TABLE>
一行目のセル１

（例）セルが四つの場合 
<TABLE>
 <TR>
  <TD>一行目のセル１</TD>
  <TD>一行目のセル２</TD>
 </TR>
 <TR>
  <TD>二行目のセル１</TD>
  <TD>二行目のセル２</TD>
 </TR>
</TABLE>
一行目のセル１ 一行目のセル２
二行目のセル１ 二行目のセル２
[テーブルのサイズを設定する]



<WIDTH> タグでテーブルの幅を設定します。
<HEIGHT> タグでテーブルの高さを設定します。

（例） 
<TABLE WIDTH="300" HEIGHT="100">
 <TR>
  <TD>一行目のセル１</TD>
  <TD>一行目のセル２</TD>
 </TR>
 <TR>
  <TD>二行目のセル１</TD>
  <TD>二行目のセル２</TD>
 </TR>
</TABLE>
一行目のセル１ 一行目のセル２
二行目のセル１ 二行目のセル２


※個別に <TR>、<TD> タグに設定することもできます。
[テーブルの枠線を設定する]



<BORDER> タグで枠線の太さを設定します。
<BORDERCOLOR> タグで枠線の色を設定します。
カラーサンプルは こちら

（例） 
<TABLE BORDER="2" BORDERCOLOR="PINK">
 <TR>
  <TD>一行目のセル１</TD>
  <TD>一行目のセル２</TD>
 </TR>
 <TR>
  <TD>二行目のセル１</TD>
  <TD>二行目のセル２</TD>
 </TR>
</TABLE>
一行目のセル１ 一行目のセル２
二行目のセル１ 二行目のセル２
[テーブルの背景色を設定する]



<BGCOLOR> タグで背景の色を指定します。
カラーサンプルは こちら

（例） 
<TABLE BORDER="2" BORDERCOLOR="PINK" BGCOLOR="ORANGE">
 <TR>
  <TD>一行目のセル１</TD>
  <TD>一行目のセル２</TD>
 </TR>
 <TR>
  <TD>二行目のセル１</TD>
  <TD>二行目のセル２</TD>
 </TR>
</TABLE>
一行目のセル１ 一行目のセル２
二行目のセル１ 二行目のセル２


※個別に <TR>、<TD> タグに設定することもできます。
[セルを結合する]



<COLSPAN> タグで横方向のセルの結合数を設定します。
<ROWSPAN> タグで縦方向のセルの結合数を設定します。

（例）
横のセル二つを結合する。 
<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>
一列目のセル 一行目のセル１
二行目のセル２