テーブル（表組み）

ちょいと間があきましたが、次のテーマへ進みましょう。次は、テーブルです。テーブルってのは何かというと、下のように、コンテンツを縦横に並んだ表の形に配列したものを言います。いわゆる「表」を作るだけでなく、レイアウト的にも使いでのある機能です。

● テーブルを作る

こういうのを作るためには、<TABLE>〜</TABLE> タグ、<TR>〜</TR> タグ、<TD>〜</TD> タグという、３通りのタグを使います。

<TABLE>〜</TABLE> タグは、ここからここまでがテーブルであるという宣言をします。<TR>〜</TR> タグは、テーブルの中で横１行を定義します。<TD>〜</TD> タグは、行の中で１つの欄（セル）を定義します。上のような表を作るには、ソースを次のように書きます。

<TABLE BORDER>

	<TR>
		<TD></TD>
		<TD>わたし</TD>
		<TD>あなた</TD>
	</TR>
	<TR>
		<TD>きのう</TD>
		<TD>元気でした</TD>
		<TD>かぜひいた</TD>
	</TR>
	<TR>
		<TD>きょう</TD>
		<TD>お腹こわした</TD>
		<TD>かぜが治った</TD>
	</TR>
</TABLE>

閉じるほうの </TR> は、省略してもかまいません。でも </TABLE> を書き忘れると、ワヤになります。

● テーブルに枠線を引く

上の例で <TABLE> タグの中に BORDER というオプションが書いてあるのは、テーブルのまわりと項目の間に枠線を引けという命令です。BORDER を指定せずに <TABLE>とだけ書くと、枠線が引かれずに、文字だけが表の形に並んで表示されます。

<TABE BORDER="4"> のように数値を指定すると、テーブルの外枠が、数値に従って太くなります（テーブルの内部の枠線は太くなりません）。

● テーブル内部の枠線の太さを指定する

これには CELLSPACING というオプションを使います。<TABLE CELLSPACING="5"> のように数値を指定すると、テーブル内部のすべての枠線が、その太さになります。

● セルの余白を調節する

これには CELLPADDING というオプションを使います。これを指定しないと、セルの内容と枠線との間には、ほとんど余白がなく、ぎっしりと詰まったテーブルができます。<TABLE CELLPADDING="5"> のように数値を指定すると、セルごとに数値の分だけ余白ができて、ゆとりのあるテーブルになります。

● テーブルの幅と高さ

<TABLE> タグに WIDTH と HEIGHT というオプションを付けて、画面上のテーブルの幅と高さを指定することができます。単位はピクセル数またはパーセントです。たとえば <TABLE WIDTH="50%">〜</TABLE> で囲んだテーブルを作ると、画面の幅の半分を占めるテーブルができあがります。

● テーブルにタイトルをつける

<CAPTION> というタグは、テーブルにタイトルを付けるために使います。

<TABLE BORDER>
<CAPTION ALIGN="top">１月の食費集計表</CAPTION>
〜 ここにテーブルの中身 〜
</TABLE>

のように書きます。ALIGN="top"（または省略）だと、テーブルの上に「１月の食費集計表」というタイトルが付きます。"bottom" だと下に付きます。

● テーブルの位置

<TABLE ALIGN="left"> または <TABLE ALIGN="right"> という指定をすることによって、表を画面の左に置いたり右に置いたりすることができます。

目次

翻訳フォーラムのトップページ