表を作成する [タグ編]

実際に作ってみよう（タグ打ち編）

[ ソフトで編集 ]

[ 直接タグで編集 ]

表（テーブル）は無限の可能性

ホームページで使われる表（テーブル）は単に表として使われるだけでなく、ページ全体のレイアウトや配置、段組などにも使用され、使用頻度の高いタグとして有名です。

この表を使いこなせば、たくさんのレイアウトを表示させることができるようになります。

表を作成してみよう

それでは、実際に表を作成してみましょう。ここではタグで直接編集する方法を紹介します。

完成例

最終的に以下のような表を作ることが目標です。

項目1	項目2
セル左寄せ	セル中央（センタリング）
セル右寄せ	セル背景設定

表の幅：500ピクセル、セルの幅（左列）：200ピクセル、セルの幅（右列）：300ピクセル
セル内の余白：3ピクセル、罫線の幅：1ピクセル、使用背景色：#999999/#b3d9ff/#ffffff/#f6f6f6、表の枠：なし

操作手順

デスクトップから[スタート]→[プログラム]→[アクセサリ]→[メモ帳]でメモ帳を起動する。

起動したら、以下の文字を入力するか、コピーして貼付（コピー＆ペースト）をする。

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=Shift_JIS”>
<meta http-equiv=“Content-Style-Type” content=“text/css”>
<title>表を挿入しよう</title>
</head>
<body><!–表の挿入タグ例–>
<table border=”0″ width=”500″ cellpadding=”3″
cellspacing=”1″ bgcolor=”#999999″>
<tr>
<td bgcolor=”#b3d9ff” align=”center” width=”200″>項目1</td>
<td bgcolor=”#b3d9ff” align=”center” width=”300″>項目2</td>
</tr>
<tr>
<td bgcolor=”#ffffff”>セル左寄せ</td>
<td bgcolor=”#ffffff” align=”center”>セル中央（センタリング）</td>
</tr>
<tr>
<td bgcolor=”#ffffff” align=”right”>セル右寄せ</td>
<td bgcolor=”#f6f6f6″ align=”center”>セル背景設定</td>
</tr>
</table>
<!–ここまで–></body>
</html>

記述手順

黒字で表示している部分が、今回の表を表すタグです。

まず、<table>というタグに注目してください。これが、表の骨格となる部分です。

さらに、<tr>は表の中の行を指定し、上から順に行が並びます。さらに行に対する列を<td>で指定します。

今回の例は3行2列ですから、<tr>タグが3つ、<td>タグが6つ（1行で2列あるから）登場します。

表の上から順に指定していくので、最初に登場するのは「項目1と2」が書かれている行と列で、タグは

です。これを行ごとに増やしていき、最後に</table>でタグを閉じればよいのです。

例えば、2行4列であるなら、<tr>タグは2つ、<td>タグが1つの<td>に対し、4つです。

各属性を把握する

これら表のタグに設定する属性は以下のようになります。

	各タグの属性	属性の意味	書き方の例
表の骨格 <table>	border	表の枠を指定（0で枠なし）	border=”1″
	width	表の幅を指定	width=”500″
	width	表の幅を指定	width=”80%”
	height	表の高さを指定	height=”500″
	height	表の高さを指定	height=”80%”
	cellpadding	セル内の余白を指定	cellpadding”3″
	cellspacing	罫線の幅を指定	cellspacing=”1″
	bgcolor	表全体の背景色を指定	bgcolor=”#f5f5f5″
表のセル <td>	width	指定したセルの幅	width=”300″
	width	指定したセルの幅	width=”100%”
	height	指定したセルの高さ	height=”250″
	bgcolor	指定したセルの背景色	bgcolor=”#ffffff”
	align	指定したセル内の位置揃え（右寄せ/中央寄せ/左寄せ）	align=”right”
			align=”center”
			align=”left”