テーブル(表) 



テーブル(表)を作ってみましょう。
テーブルを使うと、簡単できれいにページレイアウトが出来ます。



 テーブルの基本 

テーブルの基本は<TABLE><TR><TD></TD></TR></TABLE>のタグを使用します。
<TABLE>はテーブルを表します。
<TR>はテーブルの行を表します。
<TD>はテーブルのセル(列)を表します。
文字は <TD> と </TD> の間に書き込みます。
では簡単に1行1列のテーブルを作ってみましょう。
下の例では分かりやすくするために、見本のテーブルに色を付けてあります。
枠のあるテーブルの書き方は、後の方で説明しますね。
<TABLE><TR><TD>テーブル</TD></TR></TABLE>
テーブル

複数のセル(列)のテーブルを作るには、<TR> </TR> の中の <TD> </TD> を作りたいセルの数だけ書き込みます。
また複数行のテーブルを作るには、 <TABLE> </TABLE> の中に <TR> </TR> を作りたい行数分書き込みます。
下の見本は分かりやすいように枠を付けてあります。。実際に下のように書くと枠は付きません。

<TABLE>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
<TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>
<TR><TD>7</TD><TD>8</TD><TD>9</TD></TR>
</TABLE>
123
456
789



 テーブルに枠線を付ける 

テーブルに枠線を付けるのには BORDER= と CELLSPACING= を使います。
BORDER で枠線の高さを変えることが出来ます。
CELLSPACING で枠線の太さを変えることが出来ます。
<TABLE BORDER=1>
  
<TABLE BORDER=2>
  
<TABLE BORDER=3>
  
<TABLE BORDER=4>
  
<TABLE BORDER=1 CELLSPACING=0>
  
<TABLE BORDER=1 CELLSPACING=1>
  
<TABLE BORDER=1 CELLSPACING=2>
  
<TABLE BORDER=1 CELLSPACING=3>
  
<TABLE BORDER=1 CELLSPACING=4>
  



 枠線と文字との間隔 

枠線と文字との間に隙間をあけるには CELLPADDING= を使います。
何も指定しないときは CELLPADDING=0 と同じ隙間になります。
<TABLE BORDER=1 CELLPADDING=0>
<TABLE BORDER=1 CELLPADDING=1>
<TABLE BORDER=1 CELLPADDING=2>
<TABLE BORDER=1 CELLPADDING=3>
<TABLE BORDER=1 CELLPADDING=4>



 テーブルに色を付ける 

テーブルに色を付けるには BGCOLOR= を使います。

 テーブルに色を付ける
  テーブル全体に色を付けたいときは<TABLE BGCOLOR="#ffffff"> の様に指定します。
<TABLE BGCOLOR="#ffe6cc">
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
<TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>
</TABLE>
123
456

 横一列に色を付ける
  横一列に色を付けたいときは<TR BGCOLOR="#ffffff"> の様に指定します。
<TABLE>
<TR BGCOLOR="#ffefef"><TD>1</TD><TD>2</TD><TD>3</TD></TR>
<TR BGCOLOR="#ffe6cc"><TD>4</TD><TD>5</TD><TD>6</TD></TR>
</TABLE>
123
456

 セルに色を付ける
  セルの1つ1つに色を付けたいときは<TD BGCOLOR="#ffffff"> の様に指定します。
<TABLE>
<TR><TD BGCOLOR="#ffefef">1</TD><TD BGCOLOR="#ffe6cc">2</TD>
<TR><TD BGCOLOR="#e6ccff">3</TD><TD BGCOLOR="#ccffff">4</TD>
</TABLE>
12
34

 テーブルの周りに色を付ける
  テーブルの周りに色を付けたいときは<TABLE BORDERCOLOR="#1a6699"> の様に指定します。
<TABLE BORDER=1 BORDERCOLOR="#1a6699">
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
<TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>
</TABLE>
123
456





(リンクを貼ってみよう)戻る  TOPページへ  次へ(フレームを作ってみよう)