【HTML】テーブルで縦/横のセルを結合

HTML/CSS

もくじ

基本構文

コード

<table>
  <thead>
  <tr>
    <th>ヘッダー1</th>
    <th>ヘッダー2</th>
    <th>ヘッダー3</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>hoge1</td>
    <td>hoge2</td>
    <td>hoge3</td>
  </tr>
  <tr>
    <td>fuga1</td>
    <td>fuga2</td>
    <td>fuga3</td>
  </tr>
  <tr>
    <td>piyo1</td>
    <td>piyo2</td>
    <td>piyo3</td>
  </tr>
  </tbody>
</table>

結果

ヘッダー1 ヘッダー2 ヘッダー3
hoge1 hoge2 hoge3
fuga1 fuga2 fuga3
piyo1 piyo2 piyo3

横（行）結合

colspan属性を指定します。数字は、何列結合するか指定します。

コード

<table>
  <thead>
  <tr>
    <th>ヘッダー1</th>
    <th>ヘッダー2</th>
    <th>ヘッダー3</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>hoge1</td>
    <td>hoge2</td>
    <td>hoge3</td>
  </tr>
  <tr>
    <td colspan="2">fuga2</td>　// 変更　2列を結合
    <td>fuga3</td>
  </tr>
  <tr>
    <td>piyo1</td>
    <td>piyo2</td>
    <td>piyo3</td>
  </tr>
  </tbody>
</table>

結果

ヘッダー1 ヘッダー2 ヘッダー3
hoge1 hoge2 hoge3
fuga2 fuga3
piyo1 piyo2 piyo3

縦（列）結合

rowspan属性を指定します。数字は、何列結合するか指定します。

コード

<table>
  <thead>
  <tr>
    <th>ヘッダー1</th>
    <th>ヘッダー2</th>
    <th>ヘッダー3</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>hoge1</td>
    <td rowspan="3">hoge2</td>
    <td>hoge3</td>
  </tr>
  <tr>
    <td>fuga1</td>
    // 削除
    <td>fuga3</td>
  </tr>
  <tr>
    <td>piyo1</td>
    // 削除
    <td>piyo3</td>
  </tr>
  </tbody>
</table>

結果

ヘッダー1 ヘッダー2 ヘッダー3
hoge1 hoge2 hoge3
fuga1 fuga3
piyo1 piyo3

横（行）結合と縦（列）結合の組み合わせ

colspan属性とrowspan属性を組み合わせることで実現できます。

コード

<table>
  <thead>
  <tr>
    <th>ヘッダー1</th>
    <th>ヘッダー2</th>
    <th>ヘッダー3</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>hoge1</td>
    <td colspan="2" rowspan="2">hoge2</td>
  </tr>
  <tr>
    <td>fuga1</td>
  </tr>
  <tr>
    <td>piyo1</td>
    <td>piyo2</td>
    <td>piyo3</td>
  </tr>
  </tbody>
</table>

結果

ヘッダー1 ヘッダー2 ヘッダー3
hoge1 hoge2
fuga1
piyo1 piyo2 piyo3

マークダウンでは結合できない

独自に設定をすればできるようですが、標準のmarkdownではテーブルのセル結合はないそうです。

参考URL

ブログをやりたい-markdownのテーブルでセル結合を行う | データ駆動はじめ