colSpan özelliği, TD ve TH etiketlerinde kullanılarak yatay olarak birleştirilecek hücre miktarının belirtilmesini sağlar. Birleştirilen tüm hücreler tek bir hücre olacağı için birleştirilen diğer TD veya TH etiketlerinin kaldırılması gerekir.
HTML Sözdizimi
<element colspan="miktar" > ... </element>
JavaScript & DOM Sözdizimi
<script type="text/javascript">
miktar = element.colSpan
</script>
| miktar | İlgili hücrenin kendisi de dahil, sağa doğru yatay olarak birleştirilecek toplam hücre miktarını belirtir. |
Dönüş Değeri
| miktar | Birleştirilmiş sütun miktarı döner. |
Örnek
Aşağıdaki örnek, 3x3 boyutundaki bir tablonun 2. satırının ilk hücresinin sağ tarafındaki hücre ile colspan özelliği kullanılarak birleştirilmesini göstermektedir.
<table border="1" height="100" width="300">
<tr><td>Hücre 1-1</td><td>Hücre 1-2</td><td>Hücre 1-3</td></tr>
<tr><td colspan="2">Hücre 2-1</td><td>Hücre 2-2</td></tr>
<tr><td>Hücre 3-1</td><td>Hücre 3-2</td><td>Hücre 3-3</td></tr>
</table>
Canlı Sonuç
| Hücre 1-1 | Hücre 1-2 | Hücre 1-3 |
| Hücre 2-1 | Hücre 2-2 |
| Hücre 3-1 | Hücre 3-2 | Hücre 3-3 |
Örnekler
Aşağıdaki örnek, 3x3 boyutundaki bir tablonun 2. satırının ilk hücresinin sağ tarafındaki diğer 2 hücre ile colspan özelliği kullanılarak birleştirilmesini göstermektedir.
<table border="1" height="100" width="300">
<tr><td>Hücre 1-1</td><td>Hücre 1-2</td><td>Hücre 1-3</td></tr>
<tr><td colspan="3">Hücre 2-1</td></tr>
<tr><td>Hücre 3-1</td><td>Hücre 3-2</td><td>Hücre 3-3</td></tr>
</table>
Canlı Sonuç
| Hücre 1-1 | Hücre 1-2 | Hücre 1-3 |
| Hücre 2-1 |
| Hücre 3-1 | Hücre 3-2 | Hücre 3-3 |
Elementler
colspan özelliğinin kullanıldığı HTML etiketleri/elementleri
TD | TH