HTML 表(テーブル)「table要素」

<ここから表>

<ここから表のタイトル> これは表のタイトルです。 <ここまで表のタイトル>
<ここから表の行> <ここから表のヘッダセル> ここは表のヘッダです。 <ここまで表のヘッダセル><ここまで表の行>
<ここから表の行> <ここから表のセル> ここは表のセルです。 <ここまで表のセル><ここまで表の行>

<ここまで表>

表(テーブル)を作る「table要素」

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

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

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

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

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

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

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

 たとえば行数3、列数2の表を作る場合は以下のように記述します。
<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属性」を指定すると垂直方向にセルの結合ができます。

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

もうお分かりだと思いますが、垂直方向に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要素」とほぼ同じです。
 たとえば行数3、列数2の表で、一行目をヘッダセルとする場合は以下のように記述します。

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

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

サンプル

 今回説明した、「table要素」「tr要素」「td要素」「caption要素」「th要素」を使用したサンプルを用意します。
このサンプルソースはbody要素内(<body>~</body>)に書いてください。

サンプルソースコード

<!--ただ単に表を作るだけでは、線は表示されませんので、
	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>

表示結果

名簿表
名前 住所 電話番号
Aさん ○○市 XX-XXXX-XXXX
Bさん △△市 YY-YYYY-YYYY
Cさん ××町 ZZZ-ZZZ-ZZZZ
Dさん □□村 ???-???-????
「colspan属性」・「rowspan属性」の例
colspan属性に4を指定した例
rowspan属性に
2を指定した例
指定なし 指定なし 指定なし
指定なし colspan属性に2、
rowspan属性に2を指定した例
指定なし 指定なし

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


上の画像に表示されている英数字を入力してください *

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>