テーブルとは

表のことです。使い方としては２通りあり、ひとつは言葉の通り、表を作る場合です。もうひとつは、画像を横にならべたり、新聞みたいに段を組んだり、レイアウトするために使います。いろいろなホームページを見ると、表を作るという本来の目的ではなく、レイアウトするために使っている場合が多いみたいです。



表の枠組み
　<table border>〜</table>
　<tr>〜</tr>
　<td>〜</td>
テーブルの基本になるタグはこの3種類です。
<table>はここからテーブルが始まります、</table>はここでテーブルが終わります、と宣言するタグです。テーブルを作成するときに必ず必要です。また、borderオプションをつけると枠線がつきます。
<tr>は行の始まりを表し、</tr>は行の終わりを表します。テーブルは１行以上で構成されていますので、このタグも必ず必要になります。作成する行の数だけ、<tr>〜</tr>を書くことになります。
<td>は行の項目の始まりを表し、</td>は項目の終わりを表します。やはり、テーブルにはひとつ以上の項目があるので、このタグも必ず必要になります。行の中に作成する項目数だけ、<td>〜</td>を書くことになります。 基本的には、各行の項目数を同じにします。


見出しの項目
　<th>〜</th>
<td>〜</td>と同じ役割をします。違うのは、項目の見出しを表すことです。
表示上の違いは、<td>〜</td>は普通の文字で、項目の左寄せになり、<th>〜</th>は太字で、項目の中央に配置されます。

サンプル.

<html>
<head>
<title>パンダの家</title>
</head>
<body>

<table border="1">
<tr>
<th>番号</th>
<th>名称</th>
<th>居住地</th>
</tr>
<tr>
<td>１</td>
<td>パンダ</td>
<td>中国の山の中</td>
</tr>
<tr>
<td>２</td>
<td>キリン</td>
<td>アフリカの草原</td>
</tr>
</table>

</body>
</html>


右詰め、左詰め、真ん中
　<td align="right">〜</td>
　<th align="right">〜</th>
何も指定しないときは、<td>〜</td>は左寄せになり、<th>〜</th>は中央に配置されます。これを変更するのが、align(アライン)オプションです。
align="right"で右寄せ、align="center"で中央に、align="left"で左寄せになります。


改行してはダメ
　<td nowrap>〜</td>
　<th nowrap>〜</th>
各項目の横幅は、ブラウザのウィンドウの横幅と項目の文字数から、ブラウザが勝手に決めてしまいます。例えば、電話番号リストを作るとき、電話番号の途中で改行されると見ずらくなります。そこで、この項目は改行しては駄目と指定するのが、nowrapオプションです。


色をつける
　<table bgcolor="yellow">〜</table>
　<tr bgcolor="yellow">〜</tr>
　<td bgcolor="yellow">〜</td>
　<th bgcolor="yellow">〜</th>
テーブル中の色は、<body>タグで指定した背景色となります。テーブルの部分だけ色を変更したいときは、bgcolorオプションを使います。色の指定方法は、文字の色を変更するときと同じで、色の名前または光の三原色(RGB)を16進数で指定します。
テーブル全体の色は<table>タグの bgcolorオプションで指定します。行ごとの色は<tr>タグのbgcolor オプションで指定します。 さらに、項目ごとに色を変えたいときは、<td>タグまたは<th>タグのbgcolor オプションで指定します。
それぞれに色を指定した場合は、項目、行、テーブルの順に優先されます。


枠線を太く、細く
　<table border="5" cellspacing="3">〜</table>
テーブルの枠線の太さを変えるときは、<table>タグにcellspacingオプションを指定します。値が大きいほど枠線が太くなります。
　外枠の太さを変えるときは、<table>タグのborderオプションを指定します。値が大きいほど太くなります。border="0"にした場合すべての枠線が表示されません。


隙間を広げる、狭める
　<table cellpadding="3">〜</table>
項目の文字と枠線の隙間を調整するのが、<table>タグのcellpaddingオプションです。値が大きいほど隙間が広くなります。


サンプル.

<html>
<head>
<title>パンダの家</title>
</head>
<body>

<table border="1" celｌspacing="1" cellpadding="3" bgcolor="#ffcccc">
<tr bgcolor="#cc9999">
<th nowrap>番号</th>
<th nowrap>名称</th>
<th nowrap>居住地</th>
</tr>
<tr>
<td nowrap align="right">１</td>
<td nowrap>パンダ</td>
<td>中国の山の中</td>
</tr>
<tr>
<td nowrap align="right">２</td>
<td nowrap>キリン</td>
<td>アフリカの草原</td>
</tr>
</table>

</body>
</html>



メニューへ
 戻る 次へ