スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

前後の記事

最近の記事

縦方向にセルを連結する

要素

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

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

thを縦方向に連結する
見出し1見出し2見出し3
セル1セル2セル3
セル4セル5セル6
見出し1を縦に連結しました。しかしその分、セル1と4が左にずれるので、セルが1つ飛び出た状態になっています。セル3、6を削除するかして下さい。
ソース

<Table border = "1">
<tr><th rowspan = "3">見出し1</th><th>見出し2</th><th>見出し3</th></tr>
<tr><td>セル1</td><td>セル2</td><td>セル3</td></tr>
<tr><td>セル4</td><td>セル5</td><td>セル6</td></tr>
</table>


tdを縦方向に連結する
見出し1見出し2見出し3
セル1セル2セル3
セル4セル5セル6
見出し1を縦に連結しました。しかしその分、セル1が左にずれるので、セルが1つ飛び出た状態になっています。セル6を削除するかして下さい。
ソース

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


使用例
例を挙げて説明します。下の画像はビッダーズという、アフィリエイターならばご存知かと思いますが、ショッピングサイトです。サイト紹介にrowspanを使用してみます。
ビッダーズ・アフィリエイト
ビッダーズは、ショッピングサイトで、その商品をアフィリエイトとしてブログ内で紹介できます。報酬は現金で受け取れます。

ソース

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

トップ>記事内で使うHTML講座>縦方向にセルを連結する
次のキーワードを検索:[HTML]

前後の記事

最近の記事

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。