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

縦にまたがるセルを作る

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

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

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

<table border="1">
<tr><td>宿泊日</td><td>金額</td></tr>
<tr><td rowspan="2">1泊目</td><td>おとな 29,800円</td></tr>
<tr><td>こども 22,800円</td></tr>
</table>

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

3行目は、1つ目のセルが上の行と連結されているために<tr>~</tr>タグの中に、、<td>~</td>タグが1組しかありません。

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

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

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

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