テーブル(表)のHTMLの基本的な作り方

HTMLのtable(表)の基本の作り方

ホームページやPC向けのブログで、テーブルを使った表があるとわかりやすいですよね。特にお小遣いサイトではテーブルをよく使うかと思います。

今回はHTMLでのテーブルの基本的な作り方を詳しくご紹介していきます。

テーブルの基本 目次

  1. テーブルの基本のHTML
  2. テーブルの行や列を追加する方法
  3. テーブルに見出しを付ける方法
  4. テーブルにタイトルを付ける方法
  5. テーブルに使うHTMLのそれぞれの役割
  6. テーブルのセルを結合する方法

テーブルの基本のHTML

HTMLの<table>では、エクセルなどの表計算ソフトのように表を作ることができます。(計算はしてくれませんが。)

セル1 セル2 セル3
セル4 セル5 セル6
セル7 セル8 セル9

よくある、このようなテーブル(表)は、HTMLではこんな感じに書かれています。

HTML

<table>
	<tbody>
		<tr>
			<td>セル1</td>
			<td>セル2</td>
			<td>セル3</td>
		</tr>
		<tr>
			<td>セル4</td>
			<td>セル5</td>
			<td>セル6</td>
		</tr>
		<tr>
			<td>セル7</td>
			<td>セル8</td>
			<td>セル9</td>
		</tr>
	</tbody>
</table>

わかりやすく図にしてみるとこんな感じ

表示されるテーブルは横方向にセル(表のマス目)がならんでいますが、HTMLでは縦方向に書いてあるので、どこのタグがどこに当てはまるのかわかりにくいですよね。図にしてみたらこんな感じになります。

テーブルのHTMLの構造図

テーブルの基本 目次へ

テーブルの行や列を追加する方法

横方向の行を追加する方法

横方向の行を追加する時には、1つ分の行のまとまり(<tr></tr>)を追加したい場所に入れます。今回は2行目と、3行目の間に1行追加してみました。

セル1 セル2 セル3
セル4 セル5 セル6
追加1 追加2 追加3
セル7 セル8 セル9

HTMLではこのようになっています。

<table>
	<tbody>
		<tr>
			<td>セル1</td>
			<td>セル2</td>
			<td>セル3</td>
		</tr>
		<tr>
			<td>セル4</td>
			<td>セル5</td>
			<td>セル6</td>
		</tr>
		<tr>
			<td>追加1</td>
			<td>追加2</td>
			<td>追加3</td>
		</tr>
		<tr>
			<td>セル7</td>
			<td>セル8</td>
			<td>セル9</td>
		</tr>
	</tbody>
</table>

縦方向の列を追加する方法

縦方向の列を追加する時には、追加したい部分に、セルが1列に揃うように位置を合わせて<td></td>をテーブルの行のまとまりの中にそれぞれ追加していきます。今回は2列目と3列目の間に1列追加してみます。

セル1 セル2 追加1 セル3
セル4 セル5 追加2 セル6
セル7 セル8 追加3 セル9

HTMLではこのように、セル1とセル3の間に追加1を、追加1の位置に合わせて追加2、追加3のセルを入れて列を1つ増やしています。

<table>
	<tbody>
		<tr>
			<td>セル1</td>
			<td>セル2</td>
			<td>追加1</td>
			<td>セル3</td>
		</tr>
		<tr>
			<td>セル4</td>
			<td>セル5</td>
			<td>追加2</td>
			<td>セル6</td>
		</tr>
		<tr>
			<td>セル7</td>
			<td>セル8</td>
			<td>追加3</td>
			<td>セル9</td>
		</tr>
	</tbody>
</table>

テーブルの基本 目次へ

テーブルに見出しを付ける方法

このようにテーブルに見出しがあると、横方向に読んでいく表なんだな、とわかりやすいですよね。こんな感じに見出しのついたtableの作り方です。

セル1 セル2 セル3
セル4 セル5 セル6
セル7 セル8 セル9

HTML

<table>
	<tbody>
		<tr>
			<th>セル1</th>
			<td>セル2</td>
			<td>セル3</td>
		</tr>
		<tr>
			<th>セル4</th>
			<td>セル5</td>
			<td>セル6</td>
		</tr>
		<tr>
			<th>セル7</th>
			<td>セル8</td>
			<td>セル9</td>
		</tr>
	</tbody>
</table>

見出しにしたいセルの部分の<td><th>に変えるだけで、セルの見出しが作れます。

テーブルの基本 目次へ

テーブルにタイトルを付ける方法

こんな感じに、テーブルにタイトルを付ける方法です。

タイトル
セル1 セル2 セル3
セル4 セル5 セル6
セル7 セル8 セル9

HTML

<table>
	<caption>タイトル</caption>
	<tbody>
		<tr>
			<td>セル1</td>
			<td>セル2</td>
			<td>セル3</td>
		</tr>
		<tr>
			<td>セル4</td>
			<td>セル5</td>
			<td>セル6</td>
		</tr>
		<tr>
			<td>セル7</td>
			<td>セル8</td>
			<td>セル9</td>
		</tr>
	</tbody>
</table>

<table>の開始タグのすぐ後に、<caotion>タグでタイトルを入れてあげることでテーブルのタイトルが作れます。

テーブルの基本 目次へ

テーブルに使うHTMLのそれぞれの役割

この他にもテーブルに使うHTMLは沢山ありますが、今回紹介した主に使うHTMLのそれぞれの役割についてご紹介します。

<td>

Table Data(テーブルデータ)という意味があり、<td></td>で囲うことで、1つのセルを表します。

<th>

Table Header(テーブルヘッダ)という意味があり、<th></th>で囲うことで、1つの見出しセルを表します。

<tr>

Table Row(テーブルロウ)という意味があり、横方向1行分のセル全体を<tr></tr>で囲うことで、1行分のセルのまとまりができます。<tr>でできた行のまとまりは、縦方向に整列されます。

<tbody>

Table Body(テーブルボディ)という意味があり、メインのセルのまとまり全体を<tbody></tbody>で囲うことで、ここからここまでのセルのまとまりが本体部分ですよ、とブラウザなどに伝えることができます。

セルのまとまりを囲うHTMLタグは<tbody>以外にも、<thead>(ヘッダ)や、<tfoot>(フッタ)があります。

<table>

テーブル全体を<table></table>で囲うことで、ここからここまでがテーブルです、とブラウザなどに伝えることができます。

<caption>

テーブルのタイトルを<caption></caption>で囲うことで、ここからここまでがタイトルです、とブラウザなどに伝えれます。<caption>を書く時は、<table>の開始タグのすぐ後に書きます。

テーブルの基本 目次へ

テーブルのセルを結合する方法

複雑な表になってくると、セル同士を結合させて表示する事があると思います。このように縦方向・横方向にセルを結合させるやり方をご紹介します。

セル1 + セル2 + セル3
セル4
+
セル7
セル5 セル6
セル8 セル9

ベースのHTML

このようなテーブルをベースにセルを結合させています。セル1 + セル2 + セル3 を横方向に、セル4 + セル7 を縦方向に結合させている形です。

今回は見出し部分のセル(<th>)を結合させていますが、データ部分のセル(<td>)も同じやり方で結合させる事ができます。

セル1 セル2 セル3
セル4 セル5 セル6
セル7 セル8 セル9
<table>
	<tbody>
		<tr>
			<th>セル1</th>
			<th>セル2</th>
			<th>セル3</th>
		</tr>
		<tr>
			<th>セル4</th>
			<td>セル5</td>
			<td>セル6</td>
		</tr>
		<tr>
			<th>セル7</th>
			<td>セル8</td>
			<td>セル9</td>
		</tr>
	</tbody>
</table>

横方向にセルを結合させる方法

まずは、横方向にセルを結合させる方法です。

セル1 + セル2 + セル3
セル4 セル5 セル6
セル7 セル8 セル9

結合させたいセルの一番はじめのセル(例では<th>セル1</th>ですね。)のHTMLタグにcolspanという属性(HTMLタグのオプション)をつけて、
<th colspan="3">セル1</th>と書きます。

<th colspan="3">3の数字の部分は、結合させたいセルの数です。セル1、セル2だけ結合させたい場合は2になります。

そして、結合させたい一番はじめのセル以外のセル部分のHTMLを削除します。
(例では<th>セル2</th><th>セル3</th>部分ですね。)

結果、このようなHTMLになります。

<table>
	<tbody>
		<tr>
			<th colspan="3">セル1 + セル2 + セル3</th>
		</tr>
		<tr>
			<th>セル4</th>
			<td>セル5</td>
			<td>セル6</td>
		</tr>
		<tr>
			<th>セル7</th>
			<td>セル8</td>
			<td>セル9</td>
		</tr>
	</tbody>
</table>

縦方向にセルを結合させる方法

そして、このように縦方向にセルを結合させる方法です。

セル1 + セル2 + セル3
セル4
+
セル7
セル5 セル6
セル8 セル9

横方向にセルを結合させる時と同じように、結合させたいセルの一番はじめのセル(例では<th>セル4</th>です。)に属性を付けます。縦方向に結合させる場合はrowspanという属性を使い、<th rowspan="2">セル4</th>と書きます。

<th rowspan="2">の数字の2の部分は結合させるセルの数になります。

そして、これも横方向に結合させる時と同じなのですが、結合させたい一番はじめのセル以外のセル部分のHTMLを削除します。(例では<th>セル7</th>部分です。)

最終的にこのようなHTMLになります。

<table>
	<tbody>
		<tr>
			<th colspan="3">セル1 + セル2 + セル3</th>
		</tr>
		<tr>
			<th rowspan="2">セル4 + セル7</th>
			<td>セル5</td>
			<td>セル6</td>
		</tr>
		<tr>
			<td>セル8</td>
			<td>セル9</td>
		</tr>
	</tbody>
</table>

セルの結合に使う属性の豆知識

横方向の結合に使うcolspancolは、カラム・横方向の行(Column:カラム)という意味があります。

縦方向の結合に使うrowspanrowは、縦方向の列(Row:ロウ)という意味があります。

わたしは頭のつくりがよくないので、勉強してもすぐ忘れてしまうのですが、意味とセットで覚えるとちゃんと頭に入るような気がします。

テーブルの基本 目次へ

便利な世の中だけどHTMLを覚えておいても良いと思う

HTMLのテーブルの作り方を書いておいてアレなのですが、私の使っているHTMLエディタでは、エクセルのデータを読み込んでHTML化してくれる機能があったり、エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)というブラウザ上で簡単にHTMLにしてくれるWebサービスがあったりと便利な世の中です。

なんだ、HTML覚えなくて良いじゃないと思うかもしれないですが、ちょっとした内容の変更があった時にブログの投稿画面上でもササッと直せたり、CSSを使って自分の思い通りに装飾したい場合でも、基本のHTMLを軽く覚えておく方が良いと思います。

Pagetop
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。