1. ホーム
  2. Web制作
  3. HTML/Xhtml

HTMLテーブルのクロスロー、クロスカラムの操作(rowspan、colspan)

2022-01-21 15:32:20

一般に、セルスパンには <td> 要素の colspan 属性を、セルスパンには <td> 要素の rowspan 属性を使用します。

colspan属性は、セルがまたがることができる列の数を指定し、すべてのブラウザーでサポートされています。以下のように、数値の値をとります。

<table border="1">
  <tr>
    <th>Monday</th>
    <th>Tuesday</th>
  </tr>
  <tr>
    <td colspan="2">Sunday</td>
  </tr>
</table>

実装した結果は下図のようになります。

rowspan属性は、セルがまたがることのできる列の数を指定し、すべてのブラウザでサポートされています。以下のように、数値の値をとります。

<table border="1">
  <tr>
    <td rowspan="2">Monday</td>
    <td>Tuesday</td>
  </tr>
  <tr>
    <td>Wednesday</td>
  </tr>
</table>

実装した結果は下図のようになります。

colspanとrowspanの使い方を次のようにまとめなさい。

<table border="1">
  <tr>
    <th colspan="3">Material details description</th>
  </tr>
  <tr>
    <td colspan="2" align="center">Quantity (pieces)</td>
    <td rowspan="2">Weight (tons)</td>
  </tr>
  <tr>
    <td>Actual number of issues</td>    
    <td>Actuals</td>
  </tr>
  <tr>
    <td>12</td>    
    <td>10</td>
    <td>100.00</td>
  </tr>
</table>

実装した結果は下図のようになります。

この記事は、HTMLテーブルcrossrow crossolumn操作(rowspan、colspan)についてのすべてです、より関連するHTMLテーブルcrossrow crossolumnコンテンツは、スクリプトハウスの過去の記事を検索するか、次の関連記事を閲覧を続けて、あなたが将来よりスクリプトハウスをサポートして願っています!。