HTML colspan nedir?

Mehmet · Dün 21:03 da

HTML colspan nedir?

HTML’de colspan, bir tablo hücresinin yatay olarak kaç sütun kaplayacağını belirleyen özniteliktir. <td> veya <th> hücresine yazılır. Örneğin colspan="3", hücrenin üç sütun genişliğinde görünmesini sağlar. Genellikle tablo başlığını, bölüm etiketini veya birden fazla sütuna yayılan toplam satırını düzenlemek için kullanılır.

Nasıl çalışır?

Tablonun her satırındaki hücrelerin kapladığı toplam sütun sayısı birbiriyle uyumlu olmalıdır. colspan değeri, hücrenin kendisiyle birlikte kaç sütunluk yer işgal edeceğini söyler. Değer verilmezse hücre yalnızca bir sütun kaplar.

Örneğin üç sütunlu bir tabloda ilk satırdaki bir hücreye colspan="3" verilirse bu hücre üç sütunun tamamına yayılır. Ancak aynı satıra ayrıca üç normal hücre daha eklemek, satırın beklenen yapısını bozar; çünkü tarayıcı toplamda altı sütunluk hücre yerleştirmeye çalışır.

Çalışan en küçük örnek

Aşağıdaki örneği bir .html dosyasına kaydedip tarayıcıda açabilirsiniz:

HTML:

<table>
  <caption>Örnek stok durumu</caption>
  <tr>
    <th colspan="3">Stok bilgileri</th>
  </tr>
  <tr>
    <th>Ürün</th>
    <th>Adet</th>
    <th>Durum</th>
  </tr>
  <tr>
    <td>Klavye</td>
    <td>2</td>
    <td>Stokta</td>
  </tr>
</table>

Beklenen sonuç, “Stok bilgileri” başlığının tablonun üç sütununun tamamı boyunca uzanmasıdır. İlk satırda tek hücre bulunmasına rağmen colspan="3" nedeniyle üç sütunluk alan kaplar. İkinci ve üçüncü satırlarda ise üçer ayrı hücre vardır.

Örnek yapısal bir HTML parçasıdır; varsayılan görünümde çizgiler olmayabilir. Kenarlıkları CSS ile gösterebilirsiniz. Tablo başlığını caption, hücre ilişkilerini uygun başlık hücreleriyle tanımlamak gerekir; colspan tek başına erişilebilir başlık ilişkisi oluşturmaz.

Satırdaki hücreler	Kaplanan sütun	Üç sütunlu düzende karar
Bir hücre colspan=3	3	Satırın tamamını kaplar
Bir hücre colspan=2 + bir normal hücre	2+1	Üç sütunu tamamlar
Bir hücre colspan=3 + üç normal hücre	3+1+1+1	Hedef ızgarayı yanlış genişletir

Bu basit hesap, önceki satırlardan taşan rowspan hücreleri olmayan örnek içindir. Rowspan varsa o satırda zaten dolu olan sütunları da hesaba katın.

Uygularken doğru kararı verme

Önce tablonun o bölümünde kaç sütun olması gerektiğini belirleyin. Üç sütunlu bir yapı için tüm sütunları kaplayan hücrede colspan="3" kullanın.
Birden fazla sütunu kaplayacak hücreyi <td> veya başlık hücresiyse <th> içine ekleyin.
Aynı satırdaki diğer hücreleri hesaba katın. Hücrelerin normal sütunları ile colspan değerlerinin toplamı, satırın hedef sütun sayısını aşmamalıdır.
Dosyayı tarayıcıda açıp hücrenin beklenen genişliğe yayıldığını kontrol edin. Başlık dar kalıyorsa değer, satırdaki gerçek sütun sayısıyla eşleşmiyor olabilir.

Sık yapılan hatalar

En yaygın hata, colspan değerini tablonun toplam sütun sayısından büyük vermektir. Bu durumda tarayıcı tablo düzenini otomatik olarak yorumlayabilir ve sütunlar beklenmedik genişlikte görünebilir. Bir diğer hata, colspan verilen hücrenin kapladığı sütunları ayrıca normal hücrelerle tekrar doldurmaktır.

colspan yalnızca yatay birleştirme yapar. Hücreyi dikey olarak birden fazla satıra yaymak için rowspan kullanılır. Başlık satırını tüm tabloya yaymak istiyorsanız başlıkta, yalnızca iki sütunu birleştirmek istiyorsanız ilgili hücrede colspan="2" kullanın.

Sık sorulan sorular

colspan ile CSS width aynı şey midir?

Hayır. colspan hücrenin kaç tablo sütununu kaplayacağını belirler; CSS ile verilen genişlik ise görüntüleme boyutunu etkiler. Genişlik, sütun birleştirme işleminin yerine geçmez.

colspan sıfır yazılırsa kalan bütün sütunlar birleşir mi?

Hayır; bu amaçla sıfıra güvenmeyin. Geçerli değer 1 ile 1000 arasında sütun sayısıdır. Gerçekte birleşmesini istediğiniz sütun sayısını açıkça yazın. HTML özniteliğini tırnakla yazmak okunaklıdır; bu, değeri anlamsal olarak serbest bir metne dönüştürmez.

HTML colspan nedir?

Mehmet