HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのrowspanとcolspanとは？テーブルのセル結合方法を解説

rowspanとcolspanとは

HTMLで表（テーブル）を作成する際に使われるrowspanとcolspanは、<td>タグの属性です。これらを使うことで、1つのセルが複数の行や列にまたがって表示されるようになります。

  • rowspan：セルを縦方向（行）にまたがらせる属性
  • colspan：セルを横方向（列）にまたがらせる属性

なお、これらの属性は見出しセル用の<th>タグでも同様に使用できます。

HTMLのrowspanとcolspanとは？テーブルのセル結合方法を解説

属性値の指定方法

両属性とも数値を指定します。たとえばcolspan="3"と記述すれば、そのセルは3列分の幅を持ちます。同様にrowspan="2"とすれば、2行分の高さになります。

サンプルコード

次のコードを実行して、HTMLにおけるrowspan属性とcolspan属性の動作を確認してみましょう。

<html>
    <head>
       <style>
          table, th, td {
             border: 1px solid black;
             width: 100px;
             height: 50px;
          }
       </style>
    </head>

    <body>
       <h1>Heading</h1>
       <table>
          <tr>
            <th colspan="2"></th>
            <th></th>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td rowspan="3"></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
          </tr>
       </table>
    </body>
</html>

実行結果

HTMLのrowspanとcolspanとは？テーブルのセル結合方法を解説

この例では、1行目の<th colspan="2">によって最初の2列が横方向に結合され、2行目の<td rowspan="3">によって右端のセルが3行分の高さに縦方向へ結合されます。このようにrowspanとcolspanを組み合わせれば、複雑なレイアウトの表も柔軟に作成できます。

  1. HTMLのcolgroupタグとは？テーブルの列をまとめてスタイルする方法

    <colgroup>タグとは<colgroup>タグは、HTMLテーブル内の1つ以上の列（カラム）をひとつのグループとしてまとめるための要素です。このタグを使うことで、グループに含まれるすべての列に対して、まとめてスタイルを適用できます。セルや行ごとに個別にスタイルを記述する必要がないため、コードがすっきりし、テーブル全体のデザイン管理も効率的になります。主な属性span − 列グループが対象とする列の数を指定します。たとえば「span=3」と設定すると、先頭から3列分が同じグループとして扱われます。使用例それでは、<colgroup>タグを使った実際の実装

  2. HTML DOM TableDataのcolSpanプロパティとは？使い方を徹底解説

    HTML DOMのTableData colSpanプロパティは、HTMLドキュメント内のテーブルセル（<td>要素）のcolspan属性の値を取得・変更するために使用されます。colspan属性を操作することで、1つのセルを複数の列にまたがって表示させることが可能になります。構文colSpanプロパティの構文は以下のとおりです。1. colSpanの値を取得するobject.colSpan2. colSpanの値を設定するobject.colSpan = number「number」には、セルをまたがらせたい列の数を指定します。それでは、colSpanプロパティの具体的な使用例を