ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >HTMLタグ一覧 > テーブル

テーブルのセルを結合する

テーブルの中のセルは一つに結合することができます。

■ テーブルの横方向のセルを結合する

<td colspan="数字">で横方向のセルを 結合することができます。

【ブラウザ表示】

セル1セル2

↑本来は1行×2列のテーブル

1行目のセルが横に結合

ソース

<table border="1">
<tr>
<td colspan="2">1行目のセルが横に結合</td>……1列目と2列目のセルが結合。
</tr>
</table>

■ テーブルの縦方向のセルを結合する

<td rowspan="数字">で縦方向のセルを結合させるこ とができます。

【ブラウザ表示】

セル1セル2
セル3セル4

↑本来は2行×2列のテーブル

1列目のセルが縦に結合セル2
セル4

ソース

<table border="1">
<tr>
<td rowspan="2">1列目のセルが縦に結合 </td>……1列目のセル1とセル3が縦方向に結合。
<td>セル2</td>
</tr>
<tr>
<td>セル4</td>
</tr>
</table>

■ テーブルの縦方向と横方向のセルを結合する

縦と横両方のセルを結合するとエクセルの表のようなテーブル にすることもできます。

【ブラウザ表示】

セル1 セル2
セル3 セル4
セル5 セル6

↑本来は3行×2列のテーブル

1行目のセルが横に結合
縦に結合セル4
セル6

ソース

<table border="1">
<tr>
<td colspan="2">1行目のセルが横に結合</td>
</tr>
<tr>
<td rowspan="2">縦に結合</td><td>セル4</td>
</tr>
<tr>
<td>セル6</td>
</tr>
</table>

■ その他の項目

テーブルを作る
横幅、高さを指定する
画像や背景色を指定する
表示位置を指定する
テーブルに表題をつける
間隔、余白を指定する
枠線の色やスタイルを指定する
行と列をグループ化する
枠線の表示方法を指定する
細い枠線のテーブル
テーブルを横に並べる
テーブルで空白を作る

HTMLタグ一覧のページに戻る

HTMLタグ
テキスト
イメージ
マーキー
テーブル
リンク
リスト
水平線
フォーム
メタタグ
フレーム
音楽タグ
埋め込みタグ

HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.