About

このページでは、colspan.netについての解説と、HTMLタグの情報を求めていらっしゃるかたがたに対する情報を提供します。

  • htmlタグにおけるcolspanについて
  • 当サイト開設者について

htmlタグにおけるcolspanについて

概要

colspanとは、htmlにおいて表を記述する際に利用する枠組みである<table>タグの属性値です。行方向(横方向)にセルを結合することができます。

colspanのとりうる値は正の整数であり、標準は1です。

具体例

たとえば、3×3のテーブルを以下に用意します。

コード

<table>
<thead>
    <th>A</th>
    <th>B</th>
    <th>C</th>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</tbody>
</table>

描画結果

A B C
1 2 3
4 5 6
7 8 9

各セルに番号を振りました。では、2行目において2つのセルの結合を、3行目において3つのセルの結合を適用してみます。

コード

<table>
<thead>
    <th>A</th>
    <th>B</th>
    <th>C</th>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td colspan="2">4</td>
        <td>6</td>
    </tr>
    <tr>
        <td colspan="3">7</td>
    </tr>
</tbody>
</table>

描画結果

A B C
1 2 3
4 6
7

このようにセルの結合が行われていることが確認できます。複雑な集計表などを実現するには不可欠な機能です。

参考:rowspan

列方向(縦方向)にセルを結合する属性rowspanもあります。colspanと併用した例を以下に示します。

コード

<table>
<thead>
    <th>A</th>
    <th>B</th>
    <th>C</th>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td rowspan="2">3</td>
    </tr>
    <tr>
        <td colspan="2">4</td>
    </tr>
    <tr>
        <td colspan="3">7</td>
    </tr>
</tbody>
</table>

描画結果

A B C
1 2 3
4
7

考察

これらの結合機能は、人間にとっての視認性のためだけに、必要最小限の使用に留めるべきです。タグ構造が複雑になるためです。また、それだけでなく、テーブルのデータを流用する際(テーブルタグで記述された統計表をデータ解析する場合等)に、コンピュータによるデータ走査の妨げになるためです。

結合すると、列ごとに行数が、あるいは行ごとに列数が変わりますので、データ解析者はその埋め戻しをしなければなりません。これはデータ解析者にとって苦行でしかない愚直な作業です。

当サイト開設者について

北海道出身の情報系技術者です。 詳しくはトップページをご覧ください。