TOPページ >  テーブルを作成する > 横にまたがるセルを作る

横にまたがるセルを作る

ホームページやブログなどのウェブサイトで表を表示するには TABLEタグを使用しますが、この際 横にまたがるセルを作ることができます。

<タグ名 ROWSPAN="連結するセルの数"></タグ名>
  1. タグ名:THタグ または TD タグが使用可能です。
  2. 連結するセルの数:横に連結させるセルの数を指定します。
旅行代金
おとな29,800円
こども22,800円

このサンプルのソースは、次のようになっています。

<table border="1">
<tr><td colspan="2">旅行代金</td></tr>
<tr><td>おとな</td><td>29,800円</td></tr>
<tr><td>こども</td><td>22,800円</td></tr>
</table>

2行目と3行目は、セルが 2列のため、<tr>~</tr>タグの中に、、<td>~</td>タグが2回ずつ入れ子になっています。

1行目は、1つ目のセルと2つ目のセルが横に連結されており、<tr>~</tr>タグの中に、、<td>~</td>タグが1組しかありません。

この、セルを横に連結させる指定が、colspan="2" です。これはサンプルソースのように、<td>タグ内の td の後ろにスペースを置いて記述されます。

同じように、縦にまたがるセルを作ることもできます。詳しくはこちらをご覧ください。→縦にまたがるセルを作る

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
テーブルの余白などのスタイルを指定する
テーブル自動作成フォーム2
セル内の文字/画像の縦方向表示位置を指定する
セル内の文字/画像の横方向表示位置を指定する
セル内の余白を指定する
セルとセルの間隔を指定する
テーブルの背景画像を表示する
テーブルの背景色を指定する
テーブル枠の色を指定する
テーブルに枠をつける
テーブルの左右に文字/画像を回り込ませる
テーブルに表題をつける
セルのサイズを指定する
テーブルのサイズを指定する
テーブルに画像やボタンを表示する
横にまたがるセルを作る
縦にまたがるセルを作る
テーブルを作成する
テーブル自動作成フォーム
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス