HTML colspan テーブルのセルを横につなげる

HTMLのcolspanで、テーブルのセルを横につなげるサンプルです。

目次

サンプル colspanとは
テーブルの列を横につなぐ
  テーブルの行と列をつなぐ
colspanの列幅を指定する

colspanとは

< td colspan="横につなげるセルの数" >
  • 指定したセルの数分、セルを横につなげます。
  • セルを横に3つつなげる場合、colspan="3"とします。
  • 横に繋がる部分のtdタグは、colspan属性のあるtdタグ以外は不要になります。
  • colは、columnsの略で列という意味です。

 

テーブルの列を横につなぐ

テーブルの上側のセルをcolspanで横につなげています。

テスト  colspan セルを横につなげる テスト 

上記サンプルのコードです。

<style>
  table{border-collapse:collapse;}
  table td{border:1px solid}
  #t1{background:#e0ffff}
</style>
<table style="width: 70%;">
  <tr>
    <td>テスト1</td>
    <td id="t1" colspan="3">colspan セルを横につなげる</td>
    <td>テスト2</td>
  </tr>
  <tr>
    <td>1</td>
    <td>赤</td>
    <td>黄</td>
    <td>青</td>
    <td>2</td>
  </tr>
</table>

9行目は、colspanを指定しています。

 

テーブルの行と列をつなぐ

テーブルの行と列をcolspanとrowspanでつなげています。

テスト1 テスト2 テスト3
テスト4 テスト5
テスト5 7 8 9 テスト10

上記サンプルのコードです。

<style>
  table{border-collapse:collapse;}
  table td{border:1px solid}
  #t1{background:#e0ffff}
</style>
<table style="width: 30%;">
  <tr>
    <td>テスト1</td>
    <td id="t1" colspan="3" rowspan="2">テスト2</td>
    <td>テスト3</td>
  </tr>
  <tr>
    <td>テスト4</td>
    <td>テスト5</td>
  </tr>
  <tr>
    <td>テスト5</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>テスト10</td>
  </tr>
</table>

9行目は、colspanとrowspanを指定しています。

 

colspanの列幅を指定する(colgroup)

列幅はcolgroupで指定します。

1 colspan セルを横につなげる 3

上記サンプルのコードです。

<style>
  table{border-collapse:collapse;}
  table td{border:1px solid}
  #t1{background:#e0ffff}
</style>
<table style="width: 500px;">
  <colgroup>
    <col style="width:5%;">
    <col style="width:10%;">
    <col style="width:25%;">
    <col style="width:35%;">
    <col style="width:25%;">
  </colgroup>
  <tr>
    <td>1</td>
    <td id="t1" colspan="3">colspan セルを横につなげる</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>赤</td>
    <td>黄</td>
    <td>青</td>
    <td>2</td>
  </tr>
</table>

以下はMDNのcolgroupのリンクです。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/colgroup

関連の記事

HTML rowspan テーブルのセルを縦につなげる

△上に戻る