[HTML初心者向け] colspanとrowspanでtableを結合させる方法

[HTML初心者向け] colspanとrowspanでtableを結合させる方法

今回はHTMLでマークアップする時にはよく登場するtableタグの結合方法を紹介します。

trタグとtdタグを使って下記のようなテーブルを作成することは比較的理解がしやすいかと思うのですが、colspanrowspanという属性を利用すれば結合されたテーブルを作成することが可能です。

結合をしていないテーブル

太郎 国語 85点
花子 算数 69点
健太 社会 90点
次郎 英語 60点

結合をしたテーブル

点数表
太郎 国語 85点
算数 92点
花子 国語 75点
算数 69点
健太 国語 89点
算数 60点
次郎 国語 52点
算数 70点

「結合をしていないテーブル」と「結合をしたテーブル」を見ていただければテーブルの結合の意味がお分かりになるかと思います。

結合をしたテーブルの「点数表」のようにセルを横に結合するにはcolspanという属性を使い、セルを縦に結合するにはrowspanという属性を使います。

colspanとrowspanの使い方

tdタグにcolspan・rowspan属性をつけるとはどのように記述するのか、次に解説しますのでテーブル結合をする記述方法を実際に見てみましょう。

tdタグにcolspan属性をつけて横に結合しよう

それでは実際にテーブルの結合をやってみます。まずはcolspan属性を使ってセルを横に結合してみましょう。

<table>
	<tr>
		<td colspan="3">点数表</td>
	</tr>

	<tr>
		<td>太郎</td>
		<td>国語</td>
		<td>85点</td>
	</tr>
</table>

↓↓表示結果↓↓

点数表
太郎 国語 85点

上記のHTMLタグのように記述すれば「点数表」と書かれたtdタグ部分が横に3つ分連結されることになります。

本来trタグの中には同じ行数(つまり同じ数のtdタグ)を記述しなければいけないのですが、td colspan=”3″とすることで一つのtdタグで3列分のtdタグを結合して表示するという意味になります。

tdタグにrowspan属性をつけて縦に結合しよう

それでは今度は縦に結合する方法をやってみましょう。縦に結合する場合はrowspan属性を使います。

<table>
	<tr>
		<td rowspan="2">太郎</td>
		<td>国語</td>
		<td>85点</td>
	</tr>

	<tr>
		<td>算数</td>
		<td>92点</td>
	</tr>
</table>

↓↓表示結果↓↓

太郎 国語 85点
算数 92点

上記のHTMLタグのように記述すれば、「太郎」の部分が縦に結合されるようになります。

rowspanはcolspanと少し書き方が変わり、rowspan属性をつけたtdタグの次の行(つまり次のtrタグ)で結合された分を少なくtdタグを記述します。

rowspanの説明

もしrowspanの値が3になれば、次に続く2つのtrタグ内にtdタグが補われることになります。

<table>
	<tr>
		<td rowspan="3">太郎</td>
		<td>国語</td>
		<td>85点</td>
	</tr>

	<tr>
		<td>算数</td>
		<td>92点</td>
	</tr>

	<tr>
		<td>社会</td>
		<td>75点</td>
	</tr>
</table>

↓↓表示結果↓↓

太郎 国語 85点
算数 92点
社会 75点
まとめ

今回はtableタグの結合をするためのcolspan属性とrowspan属性の解説をさせていただきましたがいかがでしたでしょうか?

因みに今回はcolspan属性とrowspan属性をtdタグに限った説明をしてきましたが、thタグ(見出しを表示)にも利用可能です。

HTMLでマークアップをしていく中でtableタグの理解は必要不可欠と言っても過言ではないので、colspanとrowspanの使い方にも早めに慣れておきましょう!

HTMLカテゴリの最新記事