HTML rowspan テーブルのセルを縦につなげる

HTMLのrowspan属性で、テーブルのセルを縦につなげるサンプルです。

目次

仕様 rowspan属性
サンプル テーブルの左側のセルを縦につなぐ
  テーブルの右側のセルを縦につなぐ
  rowspan + 上下に行
  rowspan + 左右に列
  テーブルの行と列をつなぐ

rowspan属性

< td rowspan="縦につなげるセルの数" >
  • 指定したセルの数分、セルを縦につなげます。
  • セルを縦に3つつなげる場合、rowspan="3"とします。
  • 縦に繋がる部分のtdタグは、rowspan属性のあるtdタグ以外は不要になります。
  • rowは行という意味です。

テーブルの左側のセルを縦につなぐ

テーブルの左側のセルをrowspanで縦につなげています。

rowspan
セルを縦につなげる
赤 red
黄 yellow
青 blue

コード

上記サンプルのコードです。

<style>
table{border-collapse:collapse;}
table td{border:1px solid}
</style>
<table>
	<tr>
		<td rowspan="3">rowspan</td>
		<td>赤 red</td>
	</tr>
	<tr>
		<td>黄 yellow</td>
	</tr>
	<tr>
		<td>青 blue</td>
	</tr>
</table>

7行目は、rowspan=3を指定しています。
7,8行目は、trタグ間にtdタグが2つあります。
11行目は、trタグ間にtdタグが1つあります。
14行目は、trタグ間にtdタグが1つあります。

以下はMDNのtd要素のリンクです。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/td

テーブルの右側のセルを縦につなぐ

テーブルの右側のセルをrowspanで縦につなげています。

赤 red rowspan
セルを縦につなげる
黄 yellow
青 blue

コード

上記サンプルのコードです。

<style>
table{border-collapse:collapse;}
table td{border:1px solid}
</style>
<table>
	<tr>
		<td>赤 red</td>
		<td rowspan="3">rowspan</td>
	</tr>
	<tr>
		<td>黄 yellow</td>
	</tr>
	<tr>
		<td>青 blue</td>
	</tr>
</table>

8行目は、rowspan=3を指定しています。
7,8行目は、trタグ間にtdタグが2つあります。
11行目は、trタグ間にtdタグが1つあります。
14行目は、trタグ間にtdタグが1つあります。

rowspan + 上下に行

rowspan + 上下に行のサンプルです。

テスト
rowspan 赤 red
黄 yellow
青 blue
テスト

コード

上記サンプルのコードです。

<style>
  table {border-collapse: collapse;}
  table td {border: 1px solid}
  #t1 {background: #e0ffff}
</style>
<table style="width: 70%;">
  <tbody>
    <tr>
      <td colspan="2">テスト</td>
    </tr>
    <tr>
      <td id="t1" rowspan="3">rowspan</td>
      <td>赤 red</td>
    </tr>
    <tr>
      <td>黄 yellow</td>
    </tr>
    <tr>
      <td>青 blue</td>
    </tr>
    <tr>
      <td colspan="2">テスト</td>
    </tr>
  </tbody>
</table>

12行目はrowspanで縦のセルをつなげています。
9,22行目は、colspanで横のセルをつなげています。

rowspan + 左右に列

rowspan + 左右に列のサンプルです。

赤 red rowspan テスト1
黄 yellow テスト2
青 blue テスト3

コード

上記サンプルのコードです。

<style>
  table{border-collapse:collapse;}
  table td{border:1px solid}
  #t1{background:#e0ffff}
</style>
<table style="width: 70%;">
    <tr>
      <td>赤 red</td>
      <td id="t1" rowspan="3">rowspan</td>
      <td>テスト1</td>
    </tr>
    <tr>
      <td>黄 yellow</td>
      <td>テスト2</td>
    </tr>
    <tr>
      <td>青 blue</td>
      <td>テスト3</td>
    </tr>
</table>

8~10行目は、tdタグの行が3つありますが、
13,14行目と17,18行目は、tdタグの行は2つです。

テーブルの行と列をつなぐ

テーブルの行と列をcolspanとrowspanでつなげています。

テスト1 テスト2 テスト3
テスト4 テスト5
テスト5 7 8 9 テスト10

コード

上記サンプルのコードです。

<style>
  table{border-collapse:collapse;}
  table td{border:1px solid}
  #t1{background:#e0ffff}
</style>
<table style="width: 30%;">
  <tr>
    <td>テスト1</td>
    <td id="t1" colspan="3" rowspan="2">テスト2</td>
    <td>テスト3</td>
  </tr>
  <tr>
    <td>テスト4</td>
    <td>テスト5</td>
  </tr>
  <tr>
    <td>テスト5</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>テスト10</td>
  </tr>
</table>

9行目は、colspanとrowspanを指定しています。

関連の記事

HTML colspan テーブルのセルを横につなげる
HTML cellpadding テーブルのセル内の余白を指定する
HTML cellspacing テーブルのセルの間隔を指定する

△上に戻る