thObject.colSpanは、表（table要素）における見出しセル（th要素）のcolSpan属性値を取得、もしくは、設定するプロパティ。
colSpan属性には、水平方向（横方向）におけるセルの結合数を指定できる。
構文
取得
$thElementReference.colSpan;
戻り値
見出しセル（th要素）のcolSpan属性の値。水平方向（横方向）におけるセルの結合数。
設定
$thElementReference.colSpan = 結合数;
- 結合数
- 水平方向（横方向）におけるセルの結合数を指定。
例
$thElementReference.colSpan = 2; // 見出しセル（th要素）のcolSpan属性値を「2」に設定
サンプル
背景色が黄色のセルのcolSpan属性値：
| １行目１列目 | １行目２列目 | １行目３列目 |
|---|---|---|
| ２行目１列目 | ||
| ３行目１列目 | ３行目２列目 | ３行目３列目 |
サンプルの動作について
「１」ボタンをクリックすると、背景色が黄色のセルの「colSpan属性値」を「1」にする。「背景色が黄色のセルのcolSpan属性値：」の右横に、「1」と表示する。
「２」ボタンをクリックすると、背景色が黄色のセルの「colSpan属性値」を「2」にする。「背景色が黄色のセルのcolSpan属性値：」の右横に、「2」と表示する。
「３」ボタンをクリックすると、背景色が黄色のセルの「colSpan属性値」を「3」にする。「背景色が黄色のセルのcolSpan属性値：」の右横に、「3」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setColSpan( $n ){
var $thElementReference = document.getElementById( "sample" );
$thElementReference.colSpan = $n;
document.getElementById( "sampleOutput" ).innerHTML = $thElementReference.colSpan;
}
</script>
function setColSpan( $n ){
var $thElementReference = document.getElementById( "sample" );
$thElementReference.colSpan = $n;
document.getElementById( "sampleOutput" ).innerHTML = $thElementReference.colSpan;
}
</script>
HTML
<p>
<button onclick="setColSpan(1)">１</button>
<button onclick="setColSpan(2)">２</button>
<button onclick="setColSpan(3)">３</button>
</p>
<p>
背景色が黄色のセルのcolSpan属性値：<span id="sampleOutput"></span>
</p>
<table id="sampleTable">
<tr>
<th>１行目１列目</th>
<th>１行目２列目</th>
<th>１行目３列目</th>
</tr>
<tr>
<th id="sample" colSpan="2">２行目１列目</th>
</tr>
<tr>
<th>３行目１列目</th>
<th>３行目２列目</th>
<th>３行目３列目</th>
</tr>
</table>
<button onclick="setColSpan(1)">１</button>
<button onclick="setColSpan(2)">２</button>
<button onclick="setColSpan(3)">３</button>
</p>
<p>
背景色が黄色のセルのcolSpan属性値：<span id="sampleOutput"></span>
</p>
<table id="sampleTable">
<tr>
<th>１行目１列目</th>
<th>１行目２列目</th>
<th>１行目３列目</th>
</tr>
<tr>
<th id="sample" colSpan="2">２行目１列目</th>
</tr>
<tr>
<th>３行目１列目</th>
<th>３行目２列目</th>
<th>３行目３列目</th>
</tr>
</table>
CSS
<style>
#sample {
background-color: yellow;
}
#sampleTable th {
font-size: inherit !important;
color: inherit !important;
}
</style>
#sample {
background-color: yellow;
}
#sampleTable th {
font-size: inherit !important;
color: inherit !important;
}
</style>