| 項 目 | 説 明 |
|---|---|
| 記述形式 | colspan = "列数" |
| 値 の形式 | 連結するセル数 |
| 対応ブラウザー | C3+ / e?+ / N?+ / Fx?+ / Op?+ / Ch9+ / Sa?+ |
| 適用可能な要素 （種 類） |
<td>，<th> （固有属性） |
| 継 承 | しない |
colspan属性 は，
なお，縦方向のセルの結合は，rowspan属性 で 下方向に結合するセルの数（行数） を値に指定して行います。
まず，以下にセルの結合を行わない基本的な表（テーブル）の例を示します。
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css">
<!--
table.sample { border: solid 1px; border-collapse: separate;}
table.sample th, table.sample td { border: solid 1px;}
-->
</style> |
| HTML <body> ～ </body> |
<table class="sample">
<caption>横方向のセルの連結（結合前）</caption>
<tr>
<th>１列目の見出しセル</th>
<th>２列目の見出しセル</th>
<th>３列目の見出しセル</th>
</tr>
<tr>
<td>２行－１列目のセル</td>
<td>２行－２列目のセル</td>
<td>２行－３列目のセル</td>
</tr>
<tr>
<td>３行－１列目のセル</td>
<td>３行－２列目のセル</td>
<td>３行－３列目のセル</td>
</tr>
</table> |
| ブラウザー 表示例 | |||||||||
|---|---|---|---|---|---|---|---|---|---|
|
これを、<th> の colspan属性を使い，見出しセルを次のようにすべて結合してみましょう。
結合する最初の <th>（<th>１列目の見出しセル</th>）に colspan属性 を記述し，上の記述例にはある「<th>２列目の見出しセル</th>」，「<th>３列目の見出しセル</th>」は結合するとき使用不可能なセルとなるので，削除します。
そうすると，次のようになります。
| HTMLソース | |
|---|---|
<style type="text/css">
<!--
table.sample { border: solid 1px; border-collapse: separate}
table.sample th, table.sample td { border: solid 1px;}
-->
</style> |
|
| HTML <body> ～ </body> |
<table class="sample">
<caption>横方向のセルの連結（結合後）</caption>
<tr>
<th colspan="3">１列目の見出しセル</th>
<!-- ２列目は１列目と結合するので書かない -->
<!-- ３列目も１列目と結合するので書かない -->
</tr>
<tr>
<td>２行－１列目のセル</td>
<td>２行－２列目のセル</td>
<td>２行－３列目のセル</td>
</tr>
<tr>
<td>３行－１列目のセル</td>
<td>３行－２列目のセル</td>
<td>３行－３列目のセル</td>
</tr>
</table> |
| ブラウザー 表示例 | |||||||||
|---|---|---|---|---|---|---|---|---|---|
| |||||||||