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つあります。
テーブルの右側のセルを縦につなぐ
テーブルの右側のセルを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を指定しています。
関連の記事