SoyaBlog

これを見れば解決しそうや

HOME>CSS>tableタグで使用するcolspanとrowspanについて解説
ブログ投稿日時:
ブログ更新日時:
tableタグで使用するcolspanとrowspanについて解説

tableタグで使用するcolspanとrowspanについて解説

  1. colspan とは
  2. colspan の指定方法
  3. rowspan とは
  4. rowspan の指定方法
  5. 今回のまとめ
1.

colspan とは

colspan とは、tableタグのセルに対して水平方向の結合を指定するプロパティです。

colspan を指定するときはCSSにスタイルを書くのではなく、HTMLタグに直接書くので注意が必要です。

2.

colspan の指定方法

それでは、colspan を使用して水平方向のセルを結合するときの指定方法と表示を見ていきましょう。

<table>
  <tr>
    <th colspan="3">タイトル01</th>
  </tr>
  <tr>
    <td colspan="3">データ01</td>
  </tr>
  <tr>
    <td>データ02</td>
    <td>データ03</td>
    <td>データ04</td>
  </tr>
</table>
table {
  border-collapse: collapse;

  th,
  td {
    font-size: 16px;
    border: 1px solid #000;
    padding: 12px 16px;
  }
}
HTMLの表示
タイトル01
データ01
データ03データ03データ04

上記のように colspan を使用すると水平方向のセルを結合することができました。

また、colspan はthタグとtdタグに使用することができます。

3.

rowspan とは

rowspan とは、tableタグのセルに対して垂直方向の結合を指定するプロパティです。

rowspan を指定するときもCSSにスタイルを書くのではなく、HTMLタグに直接書くので注意が必要です。

4.

rowspan の指定方法

それでは、rowspan を使用して垂直方向のセルを結合するときの指定方法と表示を見ていきましょう。

<table>
  <tr>
    <th rowspan="3">タイトル01</th>
    <td>データ01</td>
  </tr>
  <tr>
    <td>データ02</td>
  </tr>
  <tr>
    <td>データ03</td>
  </tr>
  <tr>
    <td rowspan="3">タイトル02</th>
    <td>データ04</td>
  </tr>
  <tr>
    <td>データ05</td>
  </tr>
  <tr>
    <td>データ06</td>
  </tr>
</table>
table {
  border-collapse: collapse;

  th,
  td {
    font-size: 16px;
    border: 1px solid #000;
    padding: 12px 16px;
  }
}
HTMLの表示
タイトル01データ01
データ02
データ03
タイトル02データ04
データ05
データ06

上記のように rowspan を使用すると垂直方向のセルを結合することができました。

また、rowspan もthタグとtdタグに使用することができます。

5.

今回のまとめ

この記事では colspan と rowspan について解説しました。

colspan とは、tableタグのセルに対して水平方向の結合を指定するプロパティです。

rowspan とは、tableタグのセルに対して垂直方向の結合を指定するプロパティです。

colspan と rowspan を指定するときはCSSにスタイルを書くのではなく、HTMLタグに直接書くので注意が必要です。

最後までお読みいただきありがとうございました。