HOME

■テーブル要素３■

複数のセルにまたがった（表題を書くためなどに使う）大きなセルをレンダリングするためのプログラムです。

■rowspan（縦抜き）を使う

１のＡ	１のＢ	１のＣ
	２のＢ	２のＣ

プログラム文

<table summary="２かける３のテーブル" width="450" cellpadding="1" cellspacing="1" border="1">

 <tr>
  <td rowspan="2" width="150">１のＡ</td>
  <td width="150">１のＢ</td>
  <td width="150">１のＣ</td>
 </tr>

 <tr>

  <td>２のＢ</td>
  <td>２のＣ</td>
 </tr>

</table>

rowspan属性を使うと縦に並んだ複数のセルを、敷居を”ぶち抜いて”大きいセルにする事が出来ます。 ソースで省略されたのは「<td>２のＡ</td>」の部分です。このセルを消すのを忘れると 形がいびつなテーブルになります。属性値に入れた数値の数だけ複数のセルを１つにまとめられます。 ただし、存在する以上のセル数を指定するともちろん形がいびつになります。

■colspan（横抜き）を使う

１のＡ
２のＡ	２のＢ	２のＣ

プログラム文

<table summary="２かける３のテーブル" width="450" cellpadding="1" cellspacing="1" border="1">

 <tr>
  <td colspan="3" width="450">１のＡ</td>


 </tr>

 <tr>
  <td width="150">２のＡ</td>
  <td width="150">２のＢ</td>
  <td width="150">２のＣ</td>
 </tr>

</table>

今度は横に並んだ複数のセルをつなげることが出来るcolspan属性です。今度は横に並んだセルをつなげる属性ですが、 セル幅が変化すると言うことは、width属性にも関係するので注意して下さい。 今回のテーブルの場合、 「１のＢセル」と「１のＣセル」を削るだけではなく、１行目のセル幅指定や、 （忘れがちですが）「２行目のセル幅指定」も書き換える必要があります。

| 「ホムペ作成」のインデックスに戻る | 次のページ（アドレス要素）へ |