表（テーブル）は無限の可能性
ホームページで使われる表（テーブル）は単に表として使われるだけでなく、ページ全体のレイアウトや配置、段組などにも使用され、使用頻度の高いタグとして有名です。
この表を使いこなせば、たくさんのレイアウトを表示させることができるようになります。
表を作成してみよう
それでは、実際に表を作成してみましょう。ここではタグで直接編集する方法を紹介します。
完成例
最終的に以下のような表を作ることが目標です。
| 項目1 | 項目2 |
|---|---|
| セル左寄せ | セル中央（センタリング） |
| セル右寄せ | セル背景設定 |
表の幅：500ピクセル、セルの幅（左列）：200ピクセル、セルの幅（右列）：300ピクセル
セル内の余白：3ピクセル、罫線の幅：1ピクセル、使用背景色：#999999/#b3d9ff/#ffffff/#f6f6f6、表の枠：なし
操作手順
デスクトップから[スタート]→[プログラム]→[アクセサリ]→[メモ帳]でメモ帳を起動する。
起動したら、以下の文字を入力するか、コピーして貼付（コピー＆ペースト）をする。
<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」が書かれている行と列で、タグは
<td bgcolor=”#b3d9ff” align=”center” width=”200″>項目1</td>
<td bgcolor=”#b3d9ff” align=”center” width=”300″>項目2</td>
</tr>
です。これを行ごとに増やしていき、最後に</table>でタグを閉じればよいのです。
例えば、2行4列であるなら、<tr>タグは2つ、<td>タグが1つの<td>に対し、4つです。
各属性を把握する
これら表のタグに設定する属性は以下のようになります。
| 各タグの属性 | 属性の意味 | 書き方の例 | |
|---|---|---|---|
| 表の骨格 <table> | border | 表の枠を指定 （0で枠なし） | border=”1″ |
| width | 表の幅を指定 | width=”500″ | |
| width=”80%” | |||
| height | 表の高さを指定 | height=”500″ | |
| height=”80%” | |||
| cellpadding | セル内の余白を指定 | cellpadding”3″ | |
| cellspacing | 罫線の幅を指定 | cellspacing=”1″ | |
| bgcolor | 表全体の背景色を指定 | bgcolor=”#f5f5f5″ | |
| 表のセル <td> | width | 指定したセルの幅 | width=”300″ |
| width=”100%” | |||
| height | 指定したセルの高さ | height=”250″ | |
| bgcolor | 指定したセルの背景色 | bgcolor=”#ffffff” | |
| align | 指定したセル内の位置揃え （右寄せ/中央寄せ/左寄せ） |
align=”right” | |
| align=”center” | |||
| align=”left” |
※セルとは行と列によって区切られた一つの領域のことです。
※セルの属性は基本的に<td>内に書き、<tr>はそのままにします。
