要素

<th rowspan = "連結するセル数">〜</th>
<td rowspan = "連結するセル数">〜</th>
必須知識
・自動改行モードでのテーブルのズレ
・テーブルを作る

要素説明
rowspan:th、またはtdタグにrowspanを指定した数だけ下方向にセルを連結し、ひとつのセルにする事が出来ます。
ベースとなるテーブル
rowspan属性を指定していない、ベースとなるテーブルです。

見出し１	見出し２	見出し３
セル１	セル２	セル３
セル４	セル５	セル６

thを縦方向に連結する

見出し１	見出し２	見出し３
	セル１	セル２	セル３
	セル４	セル５	セル６

見出し１を縦に連結しました。しかしその分、セル１と４が左にずれるので、セルが１つ飛び出た状態になっています。セル３、６を削除するかして下さい。
ソース

<Table border = "1">
<tr><th rowspan = "3">見出し１</th><th>見出し２</th><th>見出し３</th></tr>
<tr><td>セル１</td><td>セル２</td><td>セル３</td></tr>
<tr><td>セル４</td><td>セル５</td><td>セル６</td></tr>
</table>

tdを縦方向に連結する

見出し１	見出し２	見出し３
セル１	セル２	セル３
	セル４	セル５	セル６

見出し１を縦に連結しました。しかしその分、セル１が左にずれるので、セルが１つ飛び出た状態になっています。セル６を削除するかして下さい。
ソース

<Table border = "1">
<tr><th rowspan = "2">見出し１</th><th>見出し２</th><th>見出し３</th></tr>
<tr><td>セル１</td><td>セル２</td><td>セル３</td></tr>
</table>

使用例
例を挙げて説明します。下の画像はビッダーズという、アフィリエイターならばご存知かと思いますが、ショッピングサイトです。サイト紹介にrowspanを使用してみます。

	ビッダーズ・アフィリエイト
	ビッダーズは、ショッピングサイトで、その商品をアフィリエイトとしてブログ内で紹介できます。報酬は現金で受け取れます。

ソース

<Table border = "1">
<tr><td rowspan = "2"><img src = "画像ＵＲＬ"></td>
<td>ビッダーズ・アフィリエイト</td></tr>
<tr><td>ビッダーズは、ショッピングサイトで、その商品をアフィリエイトとしてブログ内で紹介できます。報酬は現金で受け取れます。</td></tr>

前後の記事

最近の記事