About

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

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

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

概要

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

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

具体例

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

 <table border=1>
  <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>
 </table>

1	2	3
4	5	6
7	8	9

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

 <table border=1>
  <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>
 </table>

1	2	3
4		6
7

このようにセルの結合が行われていることが確認できます。複雑な集計表などを実現するには不可欠な機能です。またW3Cの勧告によって推奨されていませんが、テーブルデザインを利用する際にも非常に多用する属性だと考えられます。

参考:rowspan

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

 <table border=1>
  <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>
 </table>