Lesson4:テーブルを作ってみよう

Lesson4：テーブルを作ってみよう

テーブルとは？

テーブル(<TABLE>)とは、「表」の事です。

夏	あつい	日焼け	かき氷
冬	さむい	しもやけ	氷

テーブルを使えば、こんな風（下図参照）に、
レイアウトを思い通りに調節する為に使う事が出来ます。
テーブルを理解すれば、ホームページデザインの自由が広がります。
頑張って理解して下さいね。

	メニュー
		1：紅茶の話 2：お菓子の話

テーブルを作る

<TABLE>～</TABLE>（テーブル全体）

<TR>～</TR>（行）

<TD>～</TD>（列）

テーブルは３つのタグで成り立っています。
<TABLE>（テーブル）は、テーブル全体
<TR>（テーブル・ロウ）は、テーブルの「行」
<TD>（テーブル・データ・セル）は、テーブルの「列」を表します。
この３つのタグが揃っていないと、テーブルは作れません。
基本構造を必ず守って下さい。

記入例

ブラウザではこのようになります。
通常の場合、枠線は表示されません。

1	2
3	4

※文字や画像は、必ず<TD>～</TD>の間に記入します。
<TD>～</TD>で構成された枠を「セル」と言います。
<TD>と「セル」の関連は、以下の図を参考にして下さい。

例えばこんなタグだと…。

このような表になります。
<TD>～</TD>と実際に表示されるセルの位置関係がわかりますか？

セル１	セル２
セル３	セル４

テーブルに見出しを付ける

<TH> ～ </TH>

<TH>タグと</TH>タグで行や列の見出しを作成します。見出しとして定義されたテキストは、
一般的に "太字" で "センタリング" されて表示されます。尚、<TD>タグ同様にセル内の背景色の設定も行えます。

記入例①

記入例②

<TABLE BORDER="1">
<TR>
<TH>章</TH>
<TH>ページ数</TH>
<TH>状況</TH>
</TR>
<TR>
<TD>Lesson 1</TD>
<TD>10ページ</TD>
<TD>終了</TD>
</TR>
<TR>
<TD>Lesson 2</TD>
<TD>20ページ</TD>
<TD>勉強中</TD>
</TR>
</TABLE>

<TABLE BORDER="1">
<TR>
<TH BGCOLOR="#CCFFFF">章</TH>
<TD>Lesson 1</TD>
<TD>Lesson 2</TD>
</TR>
<TR>
<TH BGCOLOR="#99FFFF">ページ数</TH>
<TD>10ページ</TD>
<TD>20ページ</TD>
</TR>
<TR>
<TH BGCOLOR="#33CCFF">状況</TH>
<TD>終了</TD>
<TD>勉強中</TD>
</TR>
</TABLE>

ブラウザではこのようになります。

章	ページ数	状況
Lesson 1	10ページ	終了
Lesson 2	20ページ	勉強中

ブラウザではこのようになります。

章	Lesson 1	Lesson 2
ページ数	10ページ	20ページ
状況	終了	勉強中

テーブルに枠を付ける

<TABLE BORDER>～</TABLE>

テーブルの枠線を付けたい場合は、<TABLE>タグに<BORDER>（ボーダー）属性を付けます。

記入例

ブラウザではこのようになります。

1	2
3	4

テーブルの大きさを指定する

<TABLE HEIGHT="～" WIDTH="～">～</TABLE>

テーブルの大きさを指定するには、縦幅<HEIGHT>（ハイト）と横幅<WIDTH>（ワイズ)属性を使用します。
"～"の間の属性値には、ピクセル又は％（パーセント）で指定する事が出来ます。
％で指定した場合、ウィンドウサイズ全体からの割合でテーブルの大きさが決定されます。

記入例

ブラウザではこうなります

1	2
3	4
5	6

テーブルの位置指定

（左に寄せる） <TABLE ALIGN="left">～</TABLE>
（中央に配置） <TABLE ALIGN="center">～</TABLE>
（右に寄せる） <TABLE ALIGN="right">～</TABLE>

テーブルの位置を<ALIGN>（アライン）属性を使って指定すると、表の側面に文字を
割り込ませる事が出来ます。

記入例

<TABLE BORDER ALIGN="left">
<TR><TD>東</TD><TD>西</TD></TR>
<TR><TD>南</TD><TD>北</TD></TR>
</TABLE>
テーブルが<BR>
左に寄ります
<BR>
<BR>
<TABLE BORDER ALIGN="center">
<TR>
<TD>中央に配置</TD>
</TR>
</TABLE>
<BR>
<BR>
<TABLE BORDER ALIGN="right">
<TR><TD>ひがし</TD><TD>にし</TD></TR>
<TR><TD>みなみ</TD><TD>きた</TD></TR>
</TABLE>
テーブルが<BR>
右に寄ります。

ブラウザではこうなります

東	西
南	北

テーブルが
左に寄ります。

中央に配置

ひがし	にし
みなみ	きた

テーブルが
右に寄ります。

セルのサイズを指定する

★・・・・・セルの横幅（ピクセル）
☆・・・・・セルの高さ（ピクセル）

<TH>タグや<TD>タグにWIDTH属性やHEIGHT属性を指定すると、
セルの横幅や高さを指定することが出来ます。

○記入例

○ブラウザではこのようになります

<TABLE BORDER="1">
<TR>
<TH>章</TH>
<TH HEIGHT="50">ページ数</TH>
<TH>状況</TH>
</TR>
<TR>
<TD>Lesson 1</TD>
<TD>10ページ</TD>
<TD>終了</TD>
</TR>
<TR>
<TD>Lesson 2</TD>
<TD>20ページ</TD>
<TD WIDTH="150">勉強中</TD>
</TR>
</TABLE>

上がデフォルト

章	ページ数	状況
Lesson 1	10ページ	終了
Lesson 2	20ページ	勉強中

　 ↓

章	ページ数	状況
Lesson 1	10ページ	終了
Lesson 2	20ページ	勉強中

セル内の文章の位置指定

横方向	（セル内の中央）<TD ALIGN="center">～</TD> （セル内の左）<TD ALIGN="left">～</TD> （セル内の右）<TD ALIGN="right">～</TD>
縦方向	（セル内の上）<TD VALIGN="top">～</TD> （セル内の中央）<TD VALIGN="middle">～</TD> （セル内の下）<TD VALIGN="bottom">～</TD>

<TD>～</TD>のセル内の文章（又は画像）の位置を指定する場合は,
→横方向を指定する場合は <TD>に<ALIGN="～">
何も指定しない場合の値は、左寄せ（left）になっています。

→縦方向を指定する場合は <TD>に<VALIGN="～">属性を加えます。
何も指定しない場合の値は、中央に配置されます。

記入例

ブラウザではこうなります。

中央寄せ

右寄せ

上配置

中央配置

下配置

右上配置

セルを結合させる

（横方向に連結）<TD COLSPAN="☆">～</TD>

（縦方向に連結）<TD ROWSPAN="★">～</TD>

セル同士を結合させるには、<TD>に<COLSPAN>（カラムスパン）（横に連結）
<ROWSPAN>（ロウスパン）（縦に連結）属性を加えます。

勿論､連結したセルは1つにまとめられるので、不要な<TD>～</TD>を
入れないように注意しましょう。

「例」
<TR><TD COLSPAN="2">横2つを結合</TD>~~<TD></TD>~~</TR>
<TR><TD>セル1</TD><TD>セル２</TD></TR>

例えば、横２つのセルを結合させる場合。
<TD></TD>は不必要になります。

記入例

<TABLE BORDER>
<TR><TD COLSPAN="2">横２列と合体します</TD></TR>
<TR><TD>セル1</TD><TD>セル２</TD></TR>
</TABLE>

ブラウザではこうなります

横2列と合体します
セル1	セル2

記入例

<TABLE BORDER>
<TR><TD ROWSPAN="2">縦２列と合体します</TD><TD>セル1</TD></TR>
<TR><TD>セル２</TD></TR>
</TABLE>

ブラウザではこうなります

縦２列と合体します	セル1
	セル２

色を付ける

（テーブル全体の色）
<TABLE BGCOLOR="～">

（セルの色）
<TD BGCOLOR="～">

記入例

<TABLE BORDER BGCOLOR="#FFCCFF">
<TR><TD>こんな</TD><TD>風に</TD></TR>
<TR><TD>全体に</TD><TD>色が付きます</TD></TR>
</TABLE>

ブラウザではこうなります

こんな	風に
全体に	色が付きます

記入例

<TABLE BORDER>
<TR><TD BGCOLOR="blue">あおいろのセル</TD></TR>
<TR><TD BGCOLOR="yellow">きいろのセル</TD></TR>
</TABLE>

ブラウザではこうなります

あおいろのセル

きいろのセル

テーブルの枠線の太さ

<TABLE BORDER="☆">～</TABLE>

テーブルの枠線の太さを設定します。デフォルトは"1"で、
☆の値が"0"の場合は<TABLE>と同じ表示（枠線なし）になります。

記入例

<TABLE BORDER="5">
<TR>
<TD>周りの枠線の太さが5ピクセルです。</TD>
</TR>
</TABLE>

ブラウザではこうなります↓

周りの枠線の太さが5ピクセルです。

<TABLE BORDER="10"> と設定すると↓

周りの枠線の太さが10ピクセルです。

↑
← <TABLE BORDER="0">だと、枠線が無くなります。 →
↓

セル内側の余白

<TABLE CELLPADDING="～">～</TABLE>

セルの内側の余白（表の罫線と文字の間隔）を設定する場合は、CELLPADDING属性を使用します。
CELLPADDING="～"の属性値には、任意の数値（ピクセルで指定）を入力します。
何も指定しない場合の数値は「１」です。

記入例

<TABLE BORDER CELLPADDING="10">
<TR>
<TD>周囲に１０ピクセルの</TD>
<TD>余白が出来ています</TD>
</TR>
</TABLE>

ブラウザではこうなります

周囲に１０ピクセルの

余白が出来ています

セルの間隔を指定する

<TABLE CELLSPACING="～">～</TABLE>

セル同士の間隔を指定する場合、CELLSPACING属性を使用します。
CELLSPACING="～"の属性値には、任意の数値（ピクセルで指定）を入力します。
何も指定しない場合の数値は「２」です。

記入例

<TABLE BORDER CELLSPACING="20" BGCOLOR="orange">
<TR>
<TD>セル同士の間隔が</TD>
<TD>20ピクセルに</TD>
</TR>
<TR>
<TD>なっているのが</TD>
<TD>わかりますか？</TD>
</TR>
</TABLE>

ブラウザではこうなります

セル同士の間隔が	20ピクセルに
なっているのが	わかりますか？

まとめ

テーブルの中には、文字や画像やリンクを入れる事が出来ます。
これらのタグは、必ず<TD>～</TD>の間に入れましょう。

セルの関係が掴み難いので、「難しい！」と思ってしまいますが
いきなりテーブルを作ろうとはせずに、ノートなどに作りたいテーブルの簡単な図を
書き、必要なタグをメモしてから制作する方法を取ってみましょう。

設計図…

こんな感じで…。
…汚くて申し訳ないです。(^_^;)

まずは慣れるのが肝心です。
ここで勉強した事を生かして、色々作ってみて下さいね。

練習問題（３）

全てのLessonが終わったら、早速練習問題を解いてみましょう！

練習問題（３）へ！