要素

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

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

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

thを右方向に連結する

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

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

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

td(セル１)を右方向に連結する

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

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

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

使用例
例を挙げて説明します。YAHOO!BBの左メニュー風のものを作ってみましょう。

メール
カレンダー	ブリーフケース
アドレス帳	メモ帳
ブックマーク	ホームページ
メッセンジャー	フォト

ソース

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

前後の記事

最近の記事