colspan: birkaç sütun boyunca tek hücre
colspan="n" bir hücreyi n sütun genişliğinde yapar. Bulunduğu satırda bu durumda n - 1 hücre eksik olur. Burada toplam ilk iki sütun boyunca uzanıyor:
Son satırda iki hücre var, ama ilki iki sayılır, bu yüzden satır diğerleri gibi yine üç sütun eder.
rowspan: birkaç satır boyunca tek hücre
rowspan="n" bir hücreyi n satır yüksekliğinde yapar. Altındaki satırlar o sütunu atlar, çünkü uzun hücre onu zaten doldurur:
Bob ve Cy satırlarında yalnızca bir <td> var: Team sütunu zaten "Design" tarafından tutuluyor. HTML'de bunu belirten hiçbir şey yok, bu yüzden rowspan olan bir tabloyu yukarıdan aşağı oku ve hangi sütunların hâlâ kaplandığını say.
colspan ve rowspan birlikte: bir ders programı
Bir hücre iki yöne de uzanabilir. Klasik örnek, bazı derslerin iki saat sürdüğü ve bazılarının iki güne yayıldığı bir ders programıdır:
10:00 satırını say: saat başlığı, sonra Mon yukarıdaki satırdan gelen HTML ile kaplanıyor, sonra Lab, Tue ve Wed sütunlarını dolduruyor. 11:00'de Mon yeniden boştur ve Lab hâlâ Tue ile Wed sütunlarını kaplar, yani satırda bir veri hücresi vardır.
Tablo düzgün kalsın diye hücreleri saymak
Her hücrenin colspan değeri ve yukarıdaki rowspan hücrelerinin kapladığı sütunlar sayıldığında, her satır aynı sayıda sütun etmeli. Bir satırda bir hücre fazla olduğunda tarayıcı onun için yeni bir sütun ekler ve tablonun kenarı girintili çıkıntılı olur:
Yanlış tabloda ikinci satır, A'nın kendi ilk sütununu kapladığını unuttu, bu yüzden D başka hiçbir satırda olmayan üçüncü bir sütuna düşüyor. Çözüm bir hücreyi silmektir. Aynı hatanın colspan ile yapılanı, geniş hücrenin bulunduğu satırda tüm orijinal hücreleri tutmaktır.
Bir hücrenin eksik olması ise tam tersi sorundur: satır erken biter ve sonunda bir boşluk bırakır.
colspan ile gruplanmış başlıklar
Bir başlık, daha ayrıntılı başlıkların bulunduğu bir satırın üstünde, etiketlediği sütunlar boyunca uzanabilir. Ekran okuyucular onu altındaki tüm sütunlara uygulasın diye onu scope="colgroup" ile işaretle:
"City" rowspan="2" ile iki başlık satırı boyunca, her ay da colspan="2" ile kendi iki sütunu boyunca uzanır. <colgroup> elementleri scope="colgroup" değerinin gösterdiği sütun gruplarını tanımlar. Rome satırındaki 31 hücresinde bir ekran okuyucu böylece "Rome, July, High, 31" diyebilir. Tablo yapısının geri kalanı için HTML table sayfasına bak.
Birleştirmeleri gerçek yapı için kullan
Birleştirmeler bir tabloyu ekran okuyucuyla okumayı ve onu sıralamayı, filtrelemeyi ya da bir hesap tablosuna kopyalamayı zorlaştırır. Onları verinin gerçekten gruplu olduğu yerlerde kullan (bir toplam, alt sütunların üstündeki bir başlık, iki saat süren bir ders). Bir tablo çok sayıda birleştirmeye ihtiyaç duyuyorsa, iki basit tablo çoğu zaman daha anlaşılırdır.
Sık yapılan hatalar
- Kaplanan hücreleri bırakmak.
colspan="2"olan bir hücre iki hücrenin yerini alır; orijinallerden birini sil. - Bir
rowspanaltındaki satırları unutmak. Her birinde bir hücre eksik olmalı. colspandeğerini<tr>üzerine yazmak. Yalnızca<td>ve<th>üzerinde çalışır.- Görsel yerleşim için birleştirmeler, örneğin bir sayfa yerleşim tablosu boyunca uzanan bir banner satırı. Yerleşim için CSS grid kullan.
- "Tüm genişlik" demek için
colspan="100%". Tarayıcı yalnızca baştaki rakamları okur, bu yüzden bu hücre 100 sütuna yayılır ve tabloya boş sütunlar ekler. Değer, sütun sayısını belirten bir tam sayıdır.
Sıkça Sorulan Sorular
HTML'de colspan ne işe yarar?
colspan, bir <td> ya da <th> hücresinin birkaç sütun boyunca uzanmasını sağlar: <td colspan="3"> kendi satırında üç hücrenin yerini alır. O satırda artık diğerlerinden iki hücre eksik olmalı.
HTML'de rowspan ne işe yarar?
rowspan, bir hücrenin birkaç satır boyunca aşağı uzanmasını sağlar: <td rowspan="2"> kendi satırını ve altındakini doldurur. Bir sonraki satır o sütunu atlamalı, çünkü yukarıdaki hücre onu zaten kaplıyor.
Bir hücre colspan ve rowspan'i birlikte kullanabilir mi?
Evet. <td colspan="2" rowspan="2"> iki sütuna iki satırlık bir bloğu kaplar. İçinden geçtiği her satırda kendi hücrelerinden iki tane eksik olmalı.
Tablomda neden dışarı taşan fazladan bir hücre var?
Birleştirmeler sayıldığında bir satırda diğerlerinden fazla hücre var. Genellikle bir rowspan altındaki satır, kaplanan sütun için hâlâ bir hücre listeliyordur ya da colspan olan bir satır tüm orijinal hücrelerini tutmuştur. Fazla <td> hücresini sil.
colspan'in en büyük değeri nedir?
Tarayıcılar colspan değerini 1000, rowspan değerini 65534 ile sınırlar. colspan için 0 ya da bir rakamla başlamayan bir değer 1 olarak ele alınır.
