HTMLコードで表のセルを結合するには

サイトのページの中に表を入れたいこともありますね。

今回は、表の一部分のセルを結合させる方法についてまとめていきたいと思います。

セルの結合に使うHTMLコード

<td>タグの中に、colspan=””、rowspan=”” のコードを入れます。

【説明】

colspan=””   水平方向にセルを結合させるとき

rowspan=””  垂直方向にセルを結合させるとき

  ” ” の中には結合させたいセル数を入力します。

【例】

<td colspan=”2″>水平方向に結合したセル内の文字</td>

<td rowspan=”2″>垂直方向に結合したセル内の文字</td>

<td colspan=”2″rowspan=”2″>水平方向と垂直方向に結合したセル内の文字</td>

このようなHTMLコードを入力します。

水平方向の結合

colspan=” ”   水平方向

<td colspan=“3” > 水平方向に3つのセルを結合</td>

【水平方向にセルを結合した例】

【水平方向結合をコードで表すと】

<table border=”2″>
<tbody>
<tr>
<td colspan=”3″>水平方向の結合</td>
</tr>
<tr>
<td>サンプル1</td>
<td>サンプル2</td>
<td>サンプル3</td>
</tr>
</tbody>
</table>

垂直方向の結合

rowspan=” ”  垂直方向

<td rowspan=“3” > 垂直方向に3つのセルを結合</td>

【垂直方向にセルを結合した例】

【垂直方向の結合をコードで表すと】

<table border=”2″>
<tr>
<td rowspan=”3“>垂直方向の結合</td>
<td>サンプル1</td>
</tr>
<tr>
<td>サンプル2</td>
</tr>
<tr>
<td>サンプル3</td>
</tr>
</table>

まとめ

表のセルの結合ができるようになると、少し複雑な表を作ったり、よりわかりやすく表にまとめたりできるようになりますよ。

※ その他のHTMLコードのおすすめ記事はこちら

HTMLコードを使ってみようー文字装飾（太字、下線、色など）

HTMLでの囲み文字の装飾の方法

HTMLで蛍光ペンマーカーをつける方法

HTMLの色見本

HTMLでのリンクコードの貼り方

【レンタルサーバー】

サイト作りに信頼できるサーバーです。

Xserver Business