colspan属性

colspan属性は、HTMLのテーブルの列結合を制御します。 thタグと tdタグに適用されます。

受け取る値: 1から始まる整数。

使用方法: この属性を任意のtdセルまたはthセルに追加します。例えば、 colspanの値を2に設定すると、その属性を設定したセルはテーブルの2列分を占めます。 このとき、右側の隣接セルは消えず、拡大したセルがそれらを押しのけ、テーブルの構造が崩れます。 これを防ぐためには、右側のセルの1つを削除する必要があります。 より理解を深めるために例を参照してください。

例 . 結合のないテーブル

これから操作する、結合のないテーブルを見てみましょう:

html<table>
  <tr>
    <td>cell1</td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell8</td>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

例 . セルを2列に拡張する

セル1にcolspan属性を値2で設定し、2列に拡張してみましょう。 この場合、右側のセルを押しのけ、テーブルの構造が崩れます:

html<table>
  <tr>
    <td colspan="2">cell1</td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell8</td>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

例 . テーブルを崩さずにセルを拡張する

前の例で起きたテーブルの構造崩れを修正してみましょう。拡張したセルの右側にあるセルの1つ（セル2または3、どちらでも構いません）を削除します:

html<table>
  <tr>
    <td colspan="2">cell1</td>
    <td>cell2</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell8</td>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

例 . セルを3列に拡張する

セル1を3列に拡張し、colspan属性の値を3に設定してみましょう。 テーブルが崩れないように、さらに右側のセルを1つ削除します:

html<table>
  <tr>
    <td colspan="3">cell1</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell8</td>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

例 . colspanとrowspanの同時使用

colspan属性とrowspan属性を利用して、 セル番号4、5、7、8を結合してみましょう（以前の結合はテーブルから削除します）:

html<table>
  <tr>
    <td colspan="3">cell1</td>
  </tr>
  <tr>
    <td colspan="2" rowspan="2">cell4</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

関連項目