楽して作るほめぱげ 〜テーブルあれこれ〜

前に戻る 目次に戻る 文芸班に戻る


 テーブルタグの続きです。
 こんな使い方も出来ます。

例1:
<table border="1" width="100">
 <tr>
  <td rowspan="3">1</td>
  <td>2</td>
  <td>3</td>
 </tr>
 <tr>
  <td>4</td>
  <td>5</td>
 </tr>
 <tr>
  <td>6</td>
  <td>7</td>
 </tr>
</table>



これは「rowspan="**"」で「1つの縦セルに**行またぎますよ」という指定です。
上記の例だと、3行またぐ設定になっています。またがせるセルの数と設定した数字が違うとうまく表示されません。

例2:
<table border="1" width="100">
 <tr>
 <td colspan="3">1</td>
 </tr>
 <tr>
  <td>2</td>
  <td>3</td>
  <td>4</td>
 </tr>
 <tr>
  <td>5</td>
  <td>6</td>
  <td>7</td>
 </tr>
</table>



これは「colspan="**"」で「1つの横セルに**行またぎますよ」という指定です。
上記の例だと、3行またぐ設定になっています。またがせるセルの数と設定した数字が違うとうまく表示されません。

例3:
<table border="1" width="100">
 <tr>
  <td colspan="3">1</td>
 </tr>
 <tr>
  <td>2</td>
  <td>3</td>
  <td>4</td>
 <tr>
  <td rowspan="3">5</td>
  <td>6/td>
  <td>7</td>
 </tr>
 <tr>
  <td>8</td>
  <td>9</td>
 </tr>
 <tr>
  <td>a</td>
  <td>b</td>
 </tr>
</table>



 例1と例2を組み合わせてみました。こんな風にもできます。

 あまりごちゃごちゃに組み合わせると訳が判らなくなってしまうので、セルには数字を振る等してからテキストを入れた方が、テーブルを組む時楽だと思いますよ。




(C)1996-2003 Electric Artbox All-round Laboratory
Presented by Maki "PPCal" Miyahara
E-mail:cal@bf.mbn.or.jp