表（テーブル）を作る「table要素」

　Excelのような表計算ソフトを使って表を作ったことはありませんか？
文章だけで説明するより、表にしたほうが説明しやすい・わかりやすいことはよくあることです。

　HTMLでは、「table要素」を使って表を作ります。
<table>と</table>で囲った範囲に表を作ることができます。

　ただし、「table要素」だけでは表を作り上げることができません。
表を作り上げるためには、後に説明する「tr要素」と「td要素」が必要になります。

　ちなみに、「table要素」の「table」は、表といった意味があります。そのままですね。

表の行を作る「tr要素」と表のセルをつくる「td要素」

　「table要素」だけでは、表を作ることを定義しただけですので、表に必要な行や、行の中のセルがありません。ですから表を表示することができません。

　表の行を作るには「tr要素」、行の中のセルを作るを作るには、「td要素」を使います。
「table要素」の中の「tr要素」の数だけ行ができ、「tr要素」の中の「td要素」の数だけその行のセルが出来上がります。
<tr>と</tr>で囲った範囲が行、<td>と</td>で囲った範囲がセルとなります。

　たとえば行数３、列数２の表を作る場合は以下のように記述します。
<table>と</table>で囲った範囲に表を作ることができます。
間違えやすい、忘れやすいことなので明記しますが、水平方向が行、垂直方向が列になります。

<table>
	<tr><td></td><td></td></tr>
	<tr><td></td><td></td></tr>
	<tr><td></td><td></td></tr>
</table>

　ちなみに、「tr要素」の「tr」はTable Rowの略で、表の列といった意味で、「td要素」の「td」はTable Dataの略で、表のデータといった意味になります。

セルの結合、「colspan属性」と「rowspan属性」

　Excelなどの表計算ソフトでは、セルとセルをくっつけて一つにするセルの結合ができます。
それと同じように、「td要素」に「colspan属性」・「rowspan属性」を指定すると、セルの結合ができます。

　「colspan属性」を指定すると水平方向に、「rowspan属性」を指定すると垂直方向にセルの結合ができます。

たとえば、水平方向に２つのセルを結合するには、
<td colspan="2">
と記述します。

もうお分かりだと思いますが、垂直方向に２つのセルを結合するには、
<td rowspan="2">
と記述します。

表の表題を付ける「caption要素」

　「table要素」には、その表に表題を付けることができます。
表に表題を付けるには、「caption要素」を使用します。
<caption>と</caption>で囲った範囲が表の表題になります。

　 「caption要素」を使用する方法は簡単で、「tabel要素」の開始タグの直後に「caption要素」を使用し、表題を付ければよいだけです。
気をつけなくてはいけないのは、「tabel要素」の開始タグの直後に指定しなければいけないということです。

　ちなみに、「caption要素」の「caption」は表題やタイトル、見出し意味になります。

表のヘッダセルを作る「th要素」

　「table要素」と「tr要素」、「td要素」だけで表は作ることができますが、表のヘッダ・見出しのセルを意味する「th要素」が存在します。
<tr>と</tr>で行を作り、<th>と</th>で囲った範囲がヘッダセルとなります。

　使い方は「td要素」とほぼ同じです。
　たとえば行数３、列数２の表で、一行目をヘッダセルとする場合は以下のように記述します。

<table>
	<tr><th></th><th></th></tr>
	<tr><td></td><td></td></tr>
	<tr><td></td><td></td></tr>
<・table>

　ちなみに、「th要素」の「th」はTable Headerの略で、表のヘッダといった意味になります。

<!--ただ単に表を作るだけでは、線は表示されませんので、
	style要素でスタイルを指定して線を表示しています。
	また、th要素の文字を太字にします。-->
	<style>
		.sample table,.sample td{
			border:solid thin black;
		}
		.sample th{
			border:solid thin black;
			font-style:bold;
		}

	</style>
<div class="sample">
	<table>
		<caption>名簿表</caption>
		<tr><th>名前</th><th>住所</th><th>電話番号</th></tr>
		<tr><td>Aさん</td><td>○○市</td><td>XX-XXXX-XXXX</td></tr>
		<tr><td>Bさん</td><td>△△市</td><td>YY-YYYY-YYYY</td></tr>
		<tr><td>Cさん</td><td>××町</td><td>ZZZ-ZZZ-ZZZZ</td></tr>
		<tr><td>Dさん</td><td>□□村</td><td>???-???-????</td></tr>
	</table>

	<table>
		<caption>「colspan属性」・「rowspan属性」の例</caption>
		<tr><td colspan = "4">colspan属性に4を指定した例</td></tr>
		<tr><td rowspan = "2">rowspan属性に<br>2を指定した例</td><td>指定なし</td><td>指定なし</td><td>指定なし</td></tr>
		<tr><td>指定なし</td><td colspan = "2" rowspan = "2">colspan属性に2、<br>rowspan属性に2を指定した例</td></tr>
		<tr><td>指定なし</td><td>指定なし</td></tr>
	</table>
</div>

「table要素」のまとめと次回記事について

　今回説明した「table要素」はいかがでしたでしょうか。
「table要素」はHTMLで表を作る重要な要素です。
表を使うことで、見やすいHTML文章が作れると思いませんか？

　次回からは、HTML上でデータ入力や送信が可能な、いわゆる入力フォームを作る「form要素」の説明を３回に分けてしていきます。
まずは、フォーム領域を作り、そこにテキストを表示するラベルを表示し、データを送信するだけのフォームを作ってみましょう。
以上、当サイト管理人のAsterismでした。