セルの結合

初めに！

• 学習した内容をアウトプットすることで学習効率を上げるためにアウトプットしていきます。

• 初学者にもわかりやすいように書いていきます。

セルの結合の種類

横方向に結合するために

• colspan属性を使用する。

  縦方向に結合するために

• rowspan属性を使用する。

セルの結合の完成図

コードと解説

<table border="1">
  
  <caption>行方向(横方向)に結合</caption>
  <tr>
    <th colspan="3">セルの結合</th>
  </tr>
  <tr>
    <td>コンテンツ1</td>
    <td>コンテンツ2</td>
    <td>コンテンツ3</td>
  </tr>
</table>
<hr>
<table border="1">
  <caption>列方向(縦方向)の結合</caption>
  <tr>
    <td rowspan="3">セルを結合</td>
    <td>コンテンツ1</td>
  </tr>
  <tr>
    <td>コンテンツ2</td>
  </tr>
  <tr>
    <td>コンテンツ3</td>
  </tr>
  
</table>

行方向(横方向)に結合の解説

• table要素の中にtr要素を挿入。

• 横方向にセルを結合したいのでtrタグの中にcolspanを挿入して、td３つ分結合させたいのでcolspan="3"と記入。

• 下に新たにtr要素準備してその中にtd要素を３つ用意する。

  • colspan="3"となっているので3つ分のtd要素が必要となる。

• それぞれコンテンツ1,2,3と記入する。

  列方向(縦方向)の結合の解説

• table要素にtr要素を挿入する。今回列方向に3つ分結合したいのでtrを３つ用意する。

• 一番上にtd要素２つ用意し、１つにはrowspanを挿入しrowspan="3"を挿入し、td要素の中にセルの結合を記述。もう１つにはコンテンツ1を記入。

• 残り２つのtr要素の中にあるtd要素の中にはそれぞれコンテンツ2,3を記入。

結語

• 行方向(横方向)に結合させたいときはcolspanを使用。

• 列方向(縦方向)に結合させたいときはrowspanを使用。