表(テーブル)は無限の可能性
ホームページで使われる表(テーブル)は単に表として使われるだけでなく、ページ全体のレイアウトや配置、段組などにも使用され、使用頻度の高いタグとして有名です。この表を使いこなせば、たくさんのレイアウトを表示させることができるようになります。
表を作成してみよう
それでは、実際に表を作成してみましょう。ここではタグで直接編集する方法を紹介します。
完成例
最終的に以下のような表を作ることが目標です。
| 項目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」が書かれている行と列で、タグは
<tr>
<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>はそのままにします。
|