HTML テーブルの行間および列間の操作 (rowspan、colspan)

一般的に、<td> 要素の colspan 属性はセルの列間操作を実装するために使用され、<td> 要素の rowspan 属性はセルの行間操作を実装するために使用されます。

colspan 属性は、セルがまたがる列の数を指定します。すべてのブラウザが colspan 属性をサポートしています。その値は、次の図に示すように数値です。

例えば：

<表の境界線="1">
  <tr>
    <th>月曜日</th>
    <th>火曜日</th>
  </tr>
  <tr>
    <td colspan="2">日曜日</td>
  </tr>
</テーブル>

実装結果を次の図に示します。

rowspan 属性は、セルがまたがる列の数を指定します。すべてのブラウザが rowspan 属性をサポートしています。その値は、次の図に示すように数値です。

例えば：

<表の境界線="1">
  <tr>
    <td rowspan="2">月曜日</td>
    <td>火曜日</td>
  </tr>
  <tr>
    <td>水曜日</td>
  </tr>
</テーブル>

実装結果を次の図に示します。

colspan と rowspan の使用法は次のようにまとめられます。

<表の境界線="1">
  <tr>
    <th colspan="3">素材の詳細</th>
  </tr>
  <tr>
    <td colspan="2" align="center">数量（個）</td>
    <td rowspan="2">重量（トン）</td>
  </tr>
  <tr>
    <td>実際の発行数</td>    
    <td>実際に回収された金額</td>
  </tr>
  <tr>
    <td>12</td>    
    <td>10</td>
    <td>100.00</td>
  </tr>
</テーブル>

実装結果を次の図に示します。

HTML テーブルの行間および列間操作 (rowspan、colspan) に関するこの記事はこれで終わりです。HTML テーブルの行間および列間操作に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。