複雑なテーブルの作り方

写真や文章を思い通りに配置しようとすると複雑なテーブルが必要になってきます。
テーブルを本来の表として利用する時も複雑なテーブルが必要になります。
自由自在に複雑な表を作るコツを説明します。

損をしない自動車保険選び損をしないクレジットカード選び銀行の利用・口座維持手数料無料化就職・アルバイト情報
トッブページに戻る文字のサイズを変更する時は Control キーを押しながらマウスのスクロールホイールを回してください

もっと複雑なテーブルを作る ▲ 実際に使いやすいテーブルを作っていきます

まず実例を見ていきます。下にある『テーブルの作り方のコツ』迄、あまり考えずに読み飛ばしてください。

横に並んだセルを一つに結合する

<TD colspan="数字">というタグを使い、「数字」には結合したいセルの数を入れます

1	2	3
4	5	6
7	8	9

左のテーブルの、ピンク色のセルが三つ結合したと考えます。

1
4	5	6
7	8	9

ベースになるテーブルのタグは、こうなっています

⇒

下のようなタグにすると上のテーブルになります

縦に並んだセルを一つに結合する

<TD rowspan="数字">というタグを使い、「数字」には結合したいセルの数を入れます。イエローとグリーンの行はセルが二つになっていることに注意してください。

1	2	3
	4	5
	6	7

縦、横両方でセルを一つに結合する

<TD rowspan="数字">というタグと
<TD colspan="数字">の組み合わせです

1	2
	3	4	5
	6	7	8

もう少し複雑なテーブル

1	2	3
1	2	4	5
6	7	8	9
10	11	12	13

上に戻る

テーブルの作り方のコツ

覚えておくのは二つだけです。
横にます目を結合するときは、<TD colspan="結合したいます目の数">
縦にます目を結合するときは、<TD rowspan="結合したいます目の数">
この二つを覚え、後は行に着目していきます。なれないうちは自分で作りたいテーブルを紙に書き、行をマーキングしてみます。その行ごとにタグを書いていけばどんな複雑なテーブルでも簡単に作れます。こんな感じです。

1
2	3	4
		5	6
		7	8
	9
	10	11	12

1行目はピンクのマーキングです。横に四つ結合していますから
<TR><TD colspan="4">1</TD></TR>と書きます。

２行目は黄色のマーキングです。縦に五つ結合したセルと、縦に三つ結合したセル、更に横に二つ結合したセルが並んでいますから
<TR><TD rowspan="5">2</TD>
<TD rowspan="3">3</TD>
<TD colspan="2">4</TD></TR> と書きます。

3行目は薄緑のマーキングです。普通のセルが横に二つ並んでいますので
<TR><TD >5</TD><TD >6</TD></TR> と書きます。

4行目は薄青のマーキングです。ここも普通のセルが横に二つ並んでいますので
<TR><TD >7</TD><TD >8</TD></TR> と書きます。

5行目は緑のマーキングです。横に三つ結合したセルですので
<TR><TD colspan="3">9</TD></TR> と書きます。

6行目は茶色のマーキングです。普通のセルが横に三つ並んでいますので
<TR> <TD >10</TD> <TD >11</TD> <TD >12</TD></TR> と書きます。
これを全部書き並べて、最初と最後に<TABLE></TABLE>を付ければ完了です。

上に戻る

空白のセルを作る

<TD >と</TD>の間に何も書かないとセルが表示されません。空白のセルを作るには
<TD >と</TD>の間に「全角スペース」を入れます。

<TD>と</TD>の間に何も書かないと、セルそのものがなくなってしまいます

1	2	3
4	5
7	8	9

<TD>と</TD>の間に全角スペースを入れると空白のセルが表示されます

1	2	3
4	5
7	8	9

上に戻る

テーブルの中に画像を入れる ▲ 作ったテーブルに画像を配置してみる

CHAPTER １-2では全体に画像を表示させましたが、その時は画像を入れたい場所に <IMG src="画像の名前">と書きました。テーブルの中に入れたい時は、入れたいセルに同じタグを書くだけです。

	2
3	4

上に戻る

テーブルの背景に画像を載せる ▲ 使いたいところだけに、背景を表示させます

CHAPTER １-2では全体に背景画像を表示させました。そのときは <BODY background="画像のファイル名">～</BODY>と書きました。
テーブルの時は
<TABLE background="画像のファイル名">と書けばテーブル全体に背景が付き、
<TD background="画像のファイル名">と書けば書いたセルだけに背景が付きます。

1	2
3	4

1	2
3	4

上に戻る

テーブルの背景に色をつける ▲

背景色の時も同じように<TABLE>とか<TD>の中に、bgcolor="色の名前"と書くだけです。

1	2
3	4

1	2
3	4

上に戻る

文字や画像の位置を調整する ▲ テーブルの中でも、更に位置が変えられます

左右方向の位置決め

標準状態では文字や画像の位置は、左詰めで配置されます。これを変えたいときは、
align="right"　align="center"　align="left" の文字を<TR>タグ、<TD>タグに追加します。
特定の行だけ中央に寄せたいときは <TR align="center">と書き、
特定のセルだけ中央に寄せたいときは <TD align="center">と書きます。

1	2
3	4

1	2
3	4

上下方向の位置決め

上下方向は標準状態では中央配置で表示されます。これを変えたいときは、
valign="top"　valign="center"　valign="bottom"で指定します。
特定の行だけ上に寄せたいときは <TR valign="top">、
特定のセルだけ上に寄せたいときは <TD valign="top">と記入します。

1	2
3	4

1	2
3	4

上に戻る

レイアウトはトライアンドエラー ▲

実際にレイアウトを進めていこうとすると、トライアンドエラーの連続になります。
実作業ではまず幅640ビクセルでテーブルを作ってみることをお奨めします。こんなテーブルをまず作って見ます。
<HTML><TABLE border="1" width="640" height="480"><TR><TD>　</TD></TR></TABLE></HTML>
これで幅640ピクセル、高さ480ピクセルの枠ができます。枠があるとなんとなく落ち着いて、考えやすくなります。
その後は、何かを変えたらその結果をIEで確認、また直してその結果をIEで確認の連続となっていきます。

この作業を効率よくやるには、「NotePad」の画面では『ファイル』『上書き保存』で保存し、「IE」の画面に移って『更新ボタン』を押して更新、これを一つのサイクルとして繰り返していきます。

次はリンクを張ることにトライします。

上に戻る