<table> <tr> <td> テーブル(表)

テーブルを作る必須の要素、table要素 & tr要素 & td要素

師匠

「間違えやすい 県庁所在地」表や。

<table>
	<tr>
		<td>愛知県</td>
		<td>名古屋市</td>
	</tr>
	<tr>
		<td>石川県</td>
		<td>金沢市</td>
	</tr>
	<tr>
		<td>東京都</td>
		<td>新宿区</td>
	</tr>
</table>
愛知県 名古屋市
石川県 金沢市
東京都 新宿区
師匠

境界線を無くすと、こうなる。

愛知県 名古屋市
石川県 金沢市
東京都 新宿区
師匠

愛知県の存在感は、名古屋に負けとるな。
昔、 愛知愛媛 の違いが 分からんかったわい。

師匠

同様に、知名度は、金沢 >> 石川県。
ところで、石川県富山県福井県の 位置を、西から順番に正しく言えるか?

弟子

えっと、、、福井、富山、石川?

師匠

ブー!
正しい答えは・・・、ググっとけ。

師匠

東京都の県庁所在地は、なんと 新宿区なんや。
都庁所在地やけどな。
ためになるなー、このサイトは。

弟子

ところで、テーブルの書き方を。。。

師匠

おっ?
まだ説明してへんかった?

ステップ・バイ・ステップで、テーブルを書く

師匠

ほな、ステップ・バイ・ステップで。
まず、<table>を書く。

<table>

</table>
師匠

<table>は、テーブルの外枠になる。
前のページ<ol><ul>と同じみたいなもんやな。
テーブルを書くには、まず必要。

師匠

次に、<tr>要素や。
<tr>要素は、テーブルのになる。

<table>
	<tr>

	</tr>
</table>
師匠

最後に、<td>要素や。
<td>要素は、テーブルのセルになる。

<table>
	<tr>
		<td>	</td>
	</tr>
</table>
弟子

最後って、これで終わりですか?

師匠

そうや。
<td>要素の中に、「りんご」と入れてみる。

<table>
	<tr>
		<td>リンゴ</td>
	</tr>
</table>
リンゴ
師匠

上は、1行1列、つまり 1×1テーブル(表) や。

師匠

<td>要素を追加して、1行2列1×2にしてみる。

<table>
	<tr>
		<td>リンゴ</td>
		<td>みかん</td>
	</tr>
</table>
リンゴ みかん
師匠

もう一つ追加すると、1行3列1×3になるな。

<table>
	<tr>
		<td>リンゴ</td>
		<td>みかん</td>
		<td>いちご</td>
	</tr>
</table>
リンゴ みかん いちご

行を増やしてみる

師匠

まず、2つ目の<tr>要素を加えて、2行にする。

<table>
	<tr>
		<td>リンゴ</td>
		<td>みかん</td>
		<td>いちご</td>
	</tr>
	<tr>
	
	</tr>
</table>
リンゴ みかん いちご
師匠

<td>要素を、加えてみるで。

<table>
	<tr>
		<td>リンゴ</td>
		<td>みかん</td>
		<td>いちご</td>
	</tr>
	<tr>
		<td>秋刀魚</td>
	</tr>
</table>
リンゴ みかん いちご
秋刀魚
師匠

2つ目。

<table>
	<tr>
		<td>リンゴ</td>
		<td>みかん</td>
		<td>いちご</td>
	</tr>
	<tr>
		<td>秋刀魚</td>
		<td>穴子</td>
	</tr>
</table>
リンゴ みかん いちご
秋刀魚 穴子
師匠

3つ目。

<table>
	<tr>
		<td>リンゴ</td>
		<td>みかん</td>
		<td>いちご</td>
	</tr>
	<tr>
		<td>秋刀魚</td>
		<td>穴子</td>
		<td>間八</td>
	</tr>
</table>
リンゴ みかん いちご
秋刀魚 穴子 間八
師匠

これで 2行3列2×3)のテーブルが出来たな。
同じ手順で、 m行n列m×n)のテーブルに拡張できるやろ。

弟子

最後の「間八」というのは、何ですか?

師匠

ヒント。2行目は全部 魚の名前 や。

テーブル構造の解説

師匠

基本的なテーブルの書き方は、分かったな。
一応、この構造を解説しておこう。

師匠

最初に挙げた 県庁所在地の表を、もう一回見てみるで。
これは、3行2列3×2)のテーブルやな。

<table>
	<tr>
		<td>愛知県</td>
		<td>名古屋市</td>
	</tr>
	<tr>
		<td>石川県</td>
		<td>金沢市</td>
	</tr>
	<tr>
		<td>東京都</td>
		<td>新宿区</td>
	</tr>
</table>
愛知県 名古屋市
石川県 金沢市
東京都 新宿区
師匠

まず、外枠となる<table>が必要。

師匠

その中に、<tr>(行)を書く。

師匠

その中に、<td>(セル)を書く。

師匠

つまり、<td><tr>子孫であり、
<tr><table>子孫である必要がある。

師匠

図式化すると、こうなる。

師匠

ただし、 直接的な親子関係である必要はない
祖父母と孫の関係でも良いわけや。
でも、<table><tr>の間、<tr><td>の間に
入ることができる要素は決まっているから、勝手に何でも入れたらダメやで。

(予告)

師匠

とりあえず、いったんHTMLの説明を終わる。
次は、CSSについて、説明するで。

復習

  • <table><tr><td>