表をつくってみよう。

文章構成時に、表を作って編集するとクールなページになります。
まず、表を使ったサンプルページを見てみましょう。(サンプルページをクリック)
次に、表を使わず、CENTER酷使したサンプルページを見てみよう。
表を使うことにより見栄えのいいページが出来ますね。

<TABLE>〜</TABLE>これが基本。でもこれだけでは表は作れません。

このタグの間に他のタグを入れて表を作ります。

<TABLE BORDER>〜</TABLE>

<TABLE>だけでは表の枠線が表示されません。

枠線を表示させたい時はBORDERを入れます。

表を作る3つの基本タグ

<TR>〜</TR>表の上下の境界線(行を作る）を設けます。

<TD>〜</TD>表の左右の境界線（列を作る）を設けます。

<TH>〜</TH>見出しとして使います。
<TD>タグと同じ働きをしますが、自動的に太字の中央揃えになります。

<table bgcolor="#666666" border="0"width="300"height="100"> <tr> <td bgcolor="#ffffff">セルA</td> <td bgcolor="#ffffff">セルB</td> <td bgcolor="#ffffff">セルC</td> </tr> <tr> <td bgcolor="#ffffff">セルD</td> <td bgcolor="#ffffff">セルE</td> <td bgcolor="#ffffff">セルF</td> </tr> <tr> <td bgcolor="#ffffff">セルG</td> <td bgcolor="#ffffff">セルH</td> <td bgcolor="#ffffff">セルI</td> </tr> </table>

このタグで表を作ると

セルA	セルB	セルC
セルD	セルE	セルF
セルG	セルH	セルI

応用1　縦方向に複数のセルをまたがせる

次は、複数のセルを縦方向にまたがせる方法です。

<TD ROWSPAN="縦方向にまたがせるセルの数">〜</TD>

<TH ROWSPAN="縦方向にまたがせるセルの数">〜</TH>
これは、 見出し用です。
指定した数の分だけセルを縦方向にまたがせます。

この場合何行指定しても、指定したセルは1行の<TR>〜</TR>中に含まれます。
先程作った表の縦セルA、セルD、セルGを結合してみましょう。

<table bgcolor="#666666" border="0"width="300"height="100"> <tr> <td bgcolor="#ffffff" rowspan="3">セルADG</td> <td bgcolor="#ffffff">セルB</td> <td bgcolor="#ffffff">セルC</td> </tr> <tr> <td bgcolor="#ffffff">セルE</td> <td bgcolor="#ffffff">セルF</td> </tr> <tr> <td bgcolor="#ffffff">セルH</td> <td bgcolor="#ffffff">セルI</td> </tr> </table>

セルADG	セルB	セルC
	セルE	セルF
	セルH	セルI

ここが大事！！またがせたセルが2行だろうと10行だろうと1行目として扱います。

応用2　横方向に複数のセルをまたがせる

縦とくれば今度は横ですね。セルA、B、Cを結合します。

タグはこちらです。 <table bgcolor="#666666" border="0"width="300"height="100"> <tr> <td bgcolor="#ffffff" colspan="3">セルABC</td> </tr> <tr> <td bgcolor="#ffffff">セルD</td> <td bgcolor="#ffffff">セルE</td> <td bgcolor="#ffffff">セルF</td> </tr> <tr> <td bgcolor="#ffffff">セルG</td> <td bgcolor="#ffffff">セルH</td> <td bgcolor="#ffffff">セルI</td> </tr> </table>

セルABC
セルD	セルE	セルF
セルG	セルH	セルI

<table border>これから表（枠線あり）を作るという宣言。先程同様、背景色、大きさ指定

<tr>1行つくれという命令。次に3つのセルを横方向にまたがせます。

<td COLSPAN="3">見出しとして使う場合<th>を使います。

　

応用3　2個のテーブルを横に並べてみる

タグはこちらを使用します。 <table border="0" align="left"> <tr> <td>1番目のテーブル</td> </tr> </table> <table border="0"> <tr> <td>2番目のテーブル</td> </tr> </table>

セルADG セルB セルC セルE セルF セルH セルI

セルABC セルD セルE セルF セルG セルH セルI

この並べるタグで画像を入れた場合どうなるか？って

表だけでなく画像、文字との組合せも使えます。

次章で表を飾りましょう！！