HTML Tablo hazırlama - hücreleri birleştirme - rowspan ve colspan tagları - PcTekno.NET | PTN

Konumunuz: Anasayfa

Html

HTML Tablo hazırlama - hücreleri birleştirme - rowspan ve colspan tagları

Çarşamba, 02 Mayıs 2007

Hücreleri Birleştirme

Tablolar kullanılırken tüm satırlarda eşit sayıda hücre kullanılması gereklidir, mesela bir satırda üç diğer satırda iki hücre oluşturulamaz. Böyle bir durumda bozuk bir görüntü oluşacaktır. Yine sûtunlarda da aynı durum geçerlidir. Mesela dikey bir sûtunda beş hücre varsa diğer tüm sûtunlarda da aynı sayıda hücre olması gerekir.

Fakat bazı durumlarda farklı gösterimler gerekli olabilir. Mesela ilk satırda iki diğer satırlarda ise üçer hücre gerekli olabilir. Yine sûtunlar için de aynı durum gerekli olabilir. Bu gibi durumlarda <TD> tagının iki özelliğini kullanıyoruz. Bunlar COLSPAN ve ROWSPAN özellikleridir.

COLSPAN özelliği ile satır içerisindeki birden fazla bitişik hücrenin birleştirilmesi sağlanır. Böylece daha geniş bir hücre ve yine satırda daha az hüce gösterilir. Kullanımı COLSPAN="hücre_sayısı" şeklindedir. Bu konuyu bir uygulama ile görelim. Örneğimizde bir satırda üç hücre ve bir sûtunda dört hücre olacak şekilde bir tablo oluşturacağız. Fakat ilk satırda ilk iki hücreyi birleştireceğiz ve son satırda ise son iki hücreyi birleştirecek şekilde tabloyu tanımlayacağız.

 
<CENTER>
<TABLE BORDER="1" BGCOLOR="Yellow"
          WIDTH="60%" HEIGHT="200">
<TR>
    <TD COLSPAN="2"> Hücre bir</TD>
    <TD> Hücre iki</TD>
 
</TR>
<TR>
    <TD> Hücre üç</TD>
    <TD> Hücre dört</TD>
    <TD> Hücre beş</TD>
</TR>
<TR>
    <TD> Hücre altı</TD>
    <TD> Hücre yedi</TD>
    <TD> Hücre sekiz</TD>
</TR>
<TR>
    <TD> Hücre dokuz</TD>
    <TD COLSPAN="2"> Hücre on</TD>
</TR>
</TABLE>
</CENTER>

Bu ifadenin sonucunda aşağıdaki tablo oluşacaktır.

Hücre bir		Hücre iki
Hücre üç	Hücre dört	Hücre beş
Hücre altı	Hücre yedi	Hücre sekiz
Hücre dokuz	Hücre on

ROWSPAN özelliği ile bir hücreyi altındaki/üstündeki hücreler ile birleştirebiliriz. Kullanımı ROWSPAN="birleştirilecek_hücre_sayısı" şeklindedir. Bir örnek üzerinde görelim.

 
<CENTER>
<TABLE BORDER="1" BGCOLOR="Yellow"
          WIDTH="60%" HEIGHT="200">
<TR>
    <TD ROWSPAN="2"> Hücre bir</TD>
    <TD> Hücre iki</TD>
    <TD> Hücre üç</TD>
</TR>
<TR>
    <TD> Hücre dört</TD>
    <TD> Hücre beş</TD>
</TR>
<TR>
    <TD> Hücre altı</TD>
    <TD> Hücre yedi</TD>
    <TD ROWSPAN="2"> Hücre sekiz</TD>
</TR>
<TR>
    <TD> Hücre dokuz</TD>
    <TD> Hücre on</TD>
</TR>
</TABLE>
</CENTER>

Bu ifadelerin sonunda aşağıdaki tablo oluşacaktır.