1. Home
  2. HTMLタグ
  3. テーブルタグ
  4. セルを結合する

セルを結合する


<td colspan="" rowspan=""></td>


td要素th要素colspan=""rowspan="" を追加すると、セルを結合することができます。



<td colspan="3" rowspan="3">セルを結合します</td>


属性 説明
colspan="" 結合するセルの数 水平方向の結合を指定 (初期値は 1
rowspan="" 結合するセルの数 垂直方向の結合を指定 (初期値は 1

使用例

■colspan(水平方向の結合)を指定した例


<table border="3">
<tr>
<td colspan="3">水平方向の結合</td>
</tr>
<tr>
<td>データセル1</td>
<td>データセル2</td>
<td>データセル3</td>
</tr>
</table>

表示例

水平方向の結合
データセル1 データセル2 データセル3

■rowspan(垂直方向の結合)を指定した例


<table border="3">
<tr>
<td rowspan="3">垂直方向の結合</td>
<td>データセル1</td>
</tr>
<tr>
<td>データセル2</td>
</tr>
<tr>
<td>データセル3</td>
</tr>
</table>

表示例

垂直方向の結合 データセル1
データセル2
データセル3

■colspanとrowspanを同時に指定した例


<table border="3">
<tr>
<td colspan="3" rowspan="3">9つのセルを結合</td>
<td>データセル1-4</td>
</tr>
<tr>
<td>データセル2-4</td>
</tr>
<tr>
<td>データセル3-4</td>
</tr>
<tr>
<td>データセル4-1</td>
<td>データセル4-2</td>
<td>データセル4-3</td>
<td>データセル4-4</td>
</tr>
</table>

表示例

9つのセルを結合 データセル1-4
データセル2-4
データセル3-4
データセル4-1 データセル4-2 データセル4-3 データセル4-4

テーブルタグ

ページの先頭へ