スポンサーサイト

横方向にセルを連結する

要素

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

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

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

<Table border = "1"> <Tr><Th colspan = "3">見出し1</th><th>見出し2</th><Th>見出し3</th></tr> <TR><TD>セル1</td><TD>セル2</td><TD>セル3</th></td></tr> <TR><TD>セル4</td><TD>セル5</td><TD>セル6</th></td></tr> </table>


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

<Table border = "1"> <Tr><Th>見出し1</th><th>見出し2</th><Th>見出し3</th></tr> <TR><TD colspan = "3">セル1</td><TD>セル2</td><TD>セル3</th></td></tr> <TR><TD>セル4</td><TD>セル5</td><TD>セル6</th></td></tr> </table>


使用例
例を挙げて説明します。YAHOO!BBの左メニュー風のものを作ってみましょう。
メール
カレンダーブリーフケース
アドレス帳メモ帳
ブックマークホームページ
メッセンジャーフォト

ソース

<table border = 1>
<tr><th colspan = "2">メール</td></tr>
<tr><td>カレンダー</td><td>ブリーフケース</td></tr>
・・・省略
</table>

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

前後の記事

最近の記事

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