テーブルタグを理解し活用する（サンプル一覧）

テーブルタグの基本と活用方法、サンプル一覧ページです＾＾是非ご参考ください＾＾

テーブルタグを理解し活用する（サンプル一覧）

まずテーブルタグを構成する３つのタグの意味を理解しましょう！

まずは<table></table>タグこれはわかりますよね＾＾

テーブルタグの始まりと終わりを指定するタグです＾＾

次に<tr></tr>
これは表の行を示す要素です。一段を作るタグとお考え下さい＾＾
その一段の中に<td></td>と言うタグで表のセルを作ります＾＾

あああ

<table cellspacing="0" cellpadding="0" summary="サンプル">
<tr>
<td>あああ</td>
</tr>
</table>

<tr>がその行の枠で<td>がその中のセル（箱）と
考えるとわかりやすいかもしれませんね＾＾

<tr>がお弁当箱
<td>がおかずとご飯を分ける仕切り＾＾；

では上記のテーブルタグに一つ仕切りを付け足します＾＾
箱ではなく仕切り（セル）なので<td>を追加すると言う事ですよね＾＾

ご飯

おかず

<table cellspacing="0" cellpadding="0" summary="サンプル">
<tr>
<td>ご飯</td>
<td>おかず</td>
</tr>
</table>

では次に１つのお弁当箱ではなく
ご飯とおかずを分けた２段のお弁当にする場合（笑）

これは仕切りではなく箱自体を追加するので
<td>ではなく<tr>を追加します＾＾

ご飯

おかず

<table cellspacing="0" cellpadding="0" summary="サンプル">
<tr>
<td>ご飯</td>
</tr>
<tr>
<td>おかず</td>
</tr>
</table>

では上記組み合わせでおかずの箱だけに
仕切りを入れてみます＾＾

ここで登場するのが「colspan」と言う横のセルを統合させるタグです＾＾
上段の箱はセルを追加しないので２つ分のセルを統合させる必要があります。

ご飯
お魚	ミートボール

<table cellspacing="0" cellpadding="0" summary="サンプル">
<tr>
<td colspan="2">ご飯</td>
</tr>
<tr>
<td>お魚</td>
<td>ミートボール</td>
</tr>
</table>

このcolspan="2"の２と言う数字が
２つ分のセルを１つに統合すると言う指示を出しています。

ちなみに２段目の箱を３つにする場合は
当然colspan="３"の様に統合するセルの数を３に変える必要がありますよね＾＾

ご飯
お魚	ミートボール	から揚げ

<table cellspacing="0" cellpadding="0" summary="サンプル">
<tr>
<td colspan="3">ご飯</td>
</tr>
<tr>
<td>お魚</td>
<td>ミートボール</td>
<td>から揚げ</td>
</tr>
</table>

では上段を２つのセル
下段を３つのセルにする場合は・・・

ご飯		佃煮
お魚	ミートボール	から揚げ

<table cellspacing="0" cellpadding="0" summary="サンプル">
<tr>
<td colspan="2">ご飯</td>
<td>佃煮</td>
</tr>
<tr>
<td>お魚</td>
<td>ミートボール</td>
<td>から揚げ</td>
</tr>
</table>

要は、ご飯のセルは下の２つ分のセルの幅を
１つのセルに統合していると言う事です＾＾

なので下段を４つのセル
上段を２つのセルにする場合

上段の個々のセルの幅を
下段の２つの幅にそれぞれ合わせる場合は
上段の各tdにcolspanで統合するセルの数を指定する必要があります。

ご飯		佃煮
お魚	ミートボール	から揚げ	ウインナー

<table cellspacing="0" cellpadding="0" summary="サンプル">
<tr>
<td colspan="2">ご飯</td>
<tdcolspan="2">佃煮</td>
</tr>
<tr>
<td>お魚</td>
<td>ミートボール</td>
<td>から揚げ</td>
<td>ウインナー</td>
</tr>
</table>

では次に縦のセルの統合を行っていきます＾＾
縦のセルの統合は「rowspan」で指定します＾＾

ご飯	佃煮
	お魚	ミートボール	から揚げ	ウインナー

<table cellspacing="0" cellpadding="0" summary="サンプル">
<tr>
<td rowspan="2">ご飯</td>
<td colspan="4">佃煮</td>
</tr>
<tr>
<td>お魚</td>
<td>ミートボール</td>
<td>から揚げ</td>
<td>ウインナー</td>
</tr>
</table>

上記の様に「colspan」と「rowspan」の組み合わせで
色々な形のテーブルを作る事ができます＾＾

あああ		いいい
ううう		えええ
おおお		かかか			ききき
くくく	けけけ	こここ	さささ	ししし
すすす	せせせ	そそそ	たたた	ちちち	つつつ

<table cellspacing="0" cellpadding="0" summary="サンプル">
<tr>
<td colspan="2">あああ</td>
<td colspan="4">いいい</td>
</tr>
<tr>
<td colspan="2">ううう</td>
<td colspan="4">えええ</td>
</tr>
<tr>
<td colspan="2">おおお</td>
<td colspan="3">かかか</td>
<td rowspan="2">ききき</td>
</tr>
<tr>
<td>くくく</td>
<td>けけけ</td>
<td>こここ</td>
<td>さささ</td>
<td>ししし</td>
</tr>
<tr>
<td>すすす</td>
<td>せせせ</td>
<td>そそそ</td>
<td>たたた</td>
<td>ちちち</td>
<td>つつつ</td>
</tr>
</table>

セルの幅を指定する

セルの幅を指定する場合はwidth=""で幅指定します＾＾

150ピクセル

200ピクセル

250ピクセル

<table cellspacing="0" cellpadding="0" summary="サンプル">
<tr>
<td width="150">150ピクセル</td>
<td width="200">200ピクセル</td>
<td width="250">250ピクセル</td>
</tr>
</table>

セルの高さを指定する

セルの高さを指定する場合はheight=""で幅指定します＾＾

100ピクセル

同じ行なので高さは統一される

<table cellspacing="0" cellpadding="0" summary="サンプル">
<tr>
<td height="100">100ピクセル</td>
<td>同じ行なので高さは統一される</td>
<td>同じ行なので高さは統一される</td>
</tr>
</table>

セルの幅と高さを指定する

幅150ピクセル、高さ１００ピクセル

幅200ピクセル、同じ行なので高さは統一される

幅250ピクセル、同じ行なので高さは統一される

<table cellspacing="0" cellpadding="0" summary="サンプル">
<tr>
<td width="150" height="100">幅150ピクセル、高さ１００ピクセル</td>
<td width="200">200ピクセル、同じ行なので高さは統一される</td>
<td width="250">250ピクセル、同じ行なので高さは統一される</td>
</tr>
</table>

セルに背景色をつける

行単位で背景色をつける場合は
trに bgcolor=""で色を指定します＾＾

カラーコード#FFFACD

背景色指定なし

<table cellspacing="0" cellpadding="0" summary="サンプル">
<tr bgcolor="#FFFACD">
<td>カラーコード#FFFACD</td>
</tr>
<tr>
<td>背景色指定なし</td>
</tr>
</table>

セル単位で背景色を付ける場合は
tdに bgcolor=""で色を指定します＾＾

背景色指定なし

カラーコード#FFFACD

背景色指定なし

<table cellspacing="0" cellpadding="0" summary="サンプル">
<tr>
<td>背景色指定なし</td>
<td bgcolor="#FFFACD">カラーコード#FFFACD</td>
<td>背景色指定なし</td>
</tr>
</table>