超簡単ホームページ作成TOP>複雑なテーブルの作り方

    複雑なテーブルの作り方

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

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

横に並んだセルを一つに結合する
<TD colspan="数字">というタグを使い、「数字」には結合したいセルの数を入れます
1 2 3
4 5 6
7 8 9
左のテーブルの、ピンク色のセルが三つ結合したと考えます。
1
4 5 6
7 8 9
ベースになるテーブルのタグは、こうなっています
<TABLE border="1">
<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>
下のようなタグにすると上のテーブルになります

<TABLE border="1">
<TR>
<TD colspan="3">1</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>


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


1 2 3
4 5
6 7
  <table border="1">
<tr>
<td rowspan="3">1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td>
</tr>
<tr>
<td>6</td><td>7</td>
</tr>
</table>


縦、横両方でセルを一つに結合する
<TD rowspan="数字">というタグと
<TD colspan="数字">の組み合わせです


1 2
3 4 5
6 7 8
  <table border="1">
<tr>
<td rowspan="3">1</td><td colspan="3">2</td>
</tr>
<tr>
<td>3</td><td>4</td><td>5</td>
</tr>
<tr>
<td>6</td><td>7</td><td>8</td>
</tr>
</table>


もう少し複雑なテーブル
1 2 3
4 5
6 7 8 9
10 11 12 13
  <table border="1">
<tr>
<td rowspan="2">1</td>
<td rowspan="2">2</td>
<td colspan="2">3</td>
</tr>
<tr>
<td>4</td><td>5</td>
</tr>
<tr>
<td>6</td><td>7</td><td>8</td><td>9</td>
</tr>
<tr>
<td>10</td><td>11</td><td>12</td><td>13</td>
</tr>
</table>
上に戻る

テーブルの作り方のコツ
覚えておくのは二つだけです。
横にます目を結合するときは、<TD colspan="結合したいます目の数">
縦にます目を結合するときは、<TD rowspan="結合したいます目の数">
この二つを覚え、後は行に着目していきます。なれないうちは自分で作りたいテーブルを紙に書き、行をマーキングしてみます。 その行ごとにタグを書いていけばどんな複雑なテーブルでも簡単に作れます。こんな感じです。
1
2 3 4
5 6
7 8
9
10 11 12
  1行目はピンクのマーキングです。 横に四つ結合していますから
<TR><TD colspan="4">1</TD></TR>と書きます。

2行目は黄色のマーキングです。 縦に五つ結合したセルと、縦に三つ結合したセル、更に横に二つ結合したセルが並んでいますから
<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>の間に何も書かないと、セルそのものがなくなってしまいます
<TABLE border="1" width="200">
<TR><TD >1</TD><TD>2</TD><TD >3</TD></TR>
<TR><TD >4</TD><TD >5</TD><TD ></TD></TR>
<TR><TD >7</TD><TD >8</TD><TD>9</TD></TR>
</TABLE>
123
45
789
<TD>と</TD>の間に全角スペースを入れると空白のセルが表示されます
<TABLE border="1" width="200">
<TR><TD >1</TD><TD>2</TD><TD >3</TD></TR>
<TR><TD >4</TD><TD >5</TD><TD > </TD></TR>
<TR><TD >7</TD><TD >8</TD><TD>9</TD></TR>
</TABLE>
123
45 
789
上に戻る


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

CHAPTER 1-2では全体に画像を表示させましたが、その時は画像を入れたい場所に <IMG src="画像の名前">と書きました。テーブルの中に入れたい時は、入れたいセルに同じタグを書くだけです。
<table border="1">
<tr><td><IMG src="hana.jpg"></td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr></table>
2
3 4
上に戻る


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

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

<table border="1" width="400" background="hana.jpg">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr></table>
1 2
3 4
<table border="1" width="400">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td background="hana.jpg">4</td>
</tr></table>
1 2
3 4
上に戻る


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

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

<table border="1" width="400" bgcolor="green">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
1 2
3 4
<table border="1" width="400">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td bgcolor="green">4</td></tr>
</table>
1 2
3 4
上に戻る



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

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

<table border="1" width="400">
<tr align="center"><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr></table>
1 2
3 4
<table border="1" width="400">
<tr><td>1</td><td align="center">2</td></tr>
<tr><td>3</td><td>4</td></tr></table>
1 2
3 4


上下方向の位置決め
上下方向は標準状態では中央配置で表示されます。これを変えたいときは、
valign="top" valign="center" valign="bottom"で指定します。
特定の行だけ上に寄せたいときは <TR valign="top">
特定のセルだけ上に寄せたいときは <TD valign="top">と記入します。
<table border="1" width="400" height="120">
<tr valign="top"><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr></table>
1 2
3 4
<table border="1" width="400" height="120">
<tr><td>1</td><td valign="top">2</td></tr>
<tr><td>3</td><td>4</td></tr></table>
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」の画面に移って『更新ボタン』を押して更新、これを一つのサイクルとして繰り返していきます。

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