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>

1	2	3
4
7

多用するとタグ構造が読みにくくなりますが、複雑なセル結合も可能であるということが確認できます。

htmlで表を構成する機会は比較的多いと考えられます。この記事が問題解決のよい説明になれば幸いです。

当サイト開設者について

Colspan
twitter

基本属性

• 1983年11月12日生
• F1大好き。
• 機械いじりが大好き。
• 環境構築大好き。
• ハードウェア大好き。
• ソフトウェア大好き。

がんばります。