;

HTML講座(24) テーブルのセルのまたぎ

2011/11/04 0 コメント

 

表の中には次のようにセルを結合して表示させたいときがあります。

あなたはどのスマートフォンですか?
iPhone Android Windows Phone


このように複数のセルをひとつにまとめるにはつぎのようにします。

◆table03.html

<html>
  <head>
  <title>テーブル セルの結合</title>
 </head>
 <body>
  <table border>
   <tr><th colspan="3">あなたはどのスマートフォンですか?</th></tr>
   <tr><td>iPhone</td><td>Android</td><td>Windows Phone</td></tr>
  </table>
 </body>
</html>

 

列方向にセルをまたぐ場合は、「colspan=”使用するセルの数”」と記述します。

この場合、3つのセルを使用しているので値は「3」となります。

また、つぎのように行方向にセルをまたぐ場合は「rowspan=”使用するセルの数”」となります。

あなたはどのスマートフォンですか? iPhone
Android
Windows Phone

◆table04.html

<html>
  <head>
  <title>テーブル セルの結合</title>
 </head>
 <body>
   <table border>
    <tr>
     <th rowspan="3">あなたはどのスマートフォンですか?</th>
     <td>iPhone</td></tr>
    <tr>
     <td>Android</td></tr>
    <tr>
     <td>Windows Phone</td></tr>
  </table>
 </body>
</html>

※セルを結合するときに「1行にあるセルの数が変わる」ということに注意が必要です。

Tagged , ,

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です