【HTML】セルの結合について（縦はrowspan、横はcolspanで結合可能）

【HTML】セルの結合について（縦はrowspan、横はcolspanで結合可能）

　htmlのテーブルのセルを結合するには、縦のセルの場合はrowspan、横はcolspanで結合することが可能です。

縦方向への結合はrowspanにて結合可能

rowspan：rowspan ="結合したい数値"
・<th>,<td>タグにrowspan属性を指定することで縦方向にセルを結合します。
　記載例⇒ <th rowspan ="2">,<td rowspan ="3">

以下、結合していない縦3セル×横3セルのテーブルとなります。

<table border ="1px">
<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>
</table>

↓↓表示結果↓↓

１のセルを縦方向に２セル文結合すると表示としては以下のようになります。

<table border ="1px">
<tr><td rowspan ="2">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>
</table>

↓↓表示結果↓↓

　上記では１のセルが縦方向に２セル分となることが確認できました。

●rowspanを表示行以上に指定した場合

<table border ="1px">
<tr><td rowspan ="4">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>
</table>

↓↓表示結果↓↓

テーブルは３行分のため、rowspanでそれ以上の大きさを指定しても見た目は3行分となります。

横方向への結合はcolspanにて結合可能

colspan：colspan ="結合したい数値"
・<th>,<td>タグにcolspan属性を指定することで横方向にセルを結合します。
　記載例⇒ <th colspan ="2">,<td colspan ="3">

１のセルを横方向に２セル文結合すると表示としては以下のようになります。

<table border ="1px">
<tr><td colspan ="2">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>
</table>

↓↓表示結果↓↓

　上記では１のセルが横方向に２セル分となることが確認できました。

●colspanを表示列以上に指定した場合

　列の指定は３列のため、１のセルのcolspanでそれ以上の大きさを指定しても見た目は3行分となります

<table border ="1px">
<tr><td colspan ="4">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>
</table>

↓↓表示結果↓↓

HTML の記事一覧へ