ウェブ木箱：HTML講座-テーブル(表)を作ってみよう

テーブル(表)なんてデータ集計するわけでもないし必要ないって思う人もいるかと思うけど実際多くのホームページで使われてるんだ。このページでも見えないだけで実は使ってる。

詳しい事はこの後の回で説明していくけど表の枠線を消して使うことでレイアウトにも応用できるってことを憶えておいてね。

テーブルの各部の呼び方を説明するね。人によって呼び方が違ったりするけど (実際ホームページ作成ソフトなんかだと呼び方もまちまち) この講座ではこの呼び方で統一するよ。

データ１

データ２


	枠の中の１つ１つをセル (もしくはデータセル)というよ。



		この周りの先を枠線と言うよ。

データ１	データ２	データ３
データ４	データ５	データ６


		データ１～データ３の横列の組みをテーブルの行、データ３、データ６の縦列の組みをテーブルの列と言うよ。同じようにデータ４～６も行、データ１、４、データ２，５も列と言えるね。

テーブルは今までのように１つのタグだけで作るってわけにはいかない。最低でも３つのタグが必要なんだ。最初は難しいかもしれないけど慣れれば簡単になると思うから何度もやってみることが大切だよ。

ではタグを紹介していこう。まずはテーブルの土台となるタグが必要だね。

このタグから終了タグの</table>までがテーブルの範囲になる。他のテーブル関係のタグはこの間に書き込むんだよ。続いて<table>の属性を１つ紹介。

borderの属性値は半角数字で指定するんだけど、 0を指定すると枠線が表示されないので最初のうちはわかりやすいように1以上の数字を指定しておいてね。

<html>
<head>
 <title>腹減り日誌♪</title>
</head>
<body>
<table border="1">

</table>
</body>
</html>


		これだけじゃまだ表は表示されないよ。

表示はされないけどイメージとしてはこんな状態。

これを<table>～</table>の間に書き込むよ。今回は２行のテーブルを作ってみよう。

<html>
<head>
 <title>腹減り日誌♪</title>
</head>
<body>
<table border="1">
 <tr>

 </tr>
 <tr>

 </tr>
</table>
</body>
</html>


		２行にするので<tr>～</tr>を２組書き込んだよ。やっぱりテーブルはまだ表示されないけどね

表示はされないけどイメージとしてはこんな感じ。 <tr>で表の行を作った状態だよ。

これを<tr>～</tr>の間に書き込むよ。今回は３列のテーブルを作ってみよう。それと<td>～</td>の間にはセルに表示させたい文字などを書き込むよ。

<html>
<head>
 <title>腹減り日誌♪</title>
</head>
<body>
<table border="1">
 <tr>
  <td>データ１</td>
  <td>データ２</td>
  <td>データ３</td>
 </tr>
 <tr>
  <td>データ４</td>
  <td>データ５</td>
  <td>データ６</td>
 </tr>
</table>
</body>
</html>


		各<tr>～</tr>の間に３つずつセルを作ったよ。

イメージとしては<td>で各セルに分けた感じだね。

腹減り日誌♪ -

データ１	データ２	データ３
データ４	データ５	データ６


		これでようやく表ができたね。

ブラウザでの表示はこちら(別ウィンドウ)

	次は表の背景色の指定だよ。次へ→
	前回はリンクの色の指定だったね。 ←前へ

	テーブル編－１
	HTML講座第１８回

		テーブルの用途

		テーブルの各部の名称

		テーブルを作ってみよう