Rowspan ve Colspan

Webmaster doğulmaz, HTML Dersleri ile webmaster olunur; Webmaster olmak için doğru adrestesiniz. Bilgi paylaştıkça artar. Zaman en değerli hazinedir. Umarım sizlerin de ilgisiyle harcadığım zamanın bir önemi kalmaz. web sitesi hazırlamaya başlamanız benim alabileceğim en güzel karşılık.

13. HTML Dersi
Table html etiketinin Rowspan ve Colspan özellikleri (Rowspan ve Colspan)

html derslerimizin en fazla zaman alan konusu tablo konusu oldu.
Henüz tablo konusunu kapatmak istemiyorum. Şimdiki dersimizde de tablo konusunu görelim. İnşaAllah bu dersimizden sonra başka bir konuya geçebiliriz.

Tablo konusunda hatırlatmalarda bulunarak bu dersimize başlasak uygun olur sanırım.

1) içiçe 3 etiket yazarak tablo elde edebiliyoruz.
2) en dış etiket <table> </table> etiketidir.
3) en iç etiket ise hücrenin kendisini tanımlayan <td> </td> etiketidir.
4) <tr> </tr> etiketi satırları ifade eder.
5) önceki derslerimizde de söylediğimiz şey hangi etiket en son açıldaysa ilk önce o kapatılır.
6) bgcolor özelliği her 3 etikete de uygulanabilir.
7) bgcolor gibi her üç etikete de uygulanabilecek özellikler bazıları şunlardır;
    height
    width
    align
Aşağıdaki 3 hücreli tek satırlı tabloda her hücrenin içini yeşile boyayalım.

HTML Kodu	Oluşan Görüntüsü
<table border=1>    <tr>      <td bgcolor="green"> Yeşil </td>      <td bgcolor="green"> Yeşil </td>      <td bgcolor="green"> Yeşil </td>    </tr> </table>	Yeşil Yeşil Yeşil

Aynı sonucu şu şekilde de elde edebiliriz.

HTML Kodu	Oluşan Görüntüsü
<table border=1>    <tr bgcolor="green">      <td> Yeşil </td>      <td> Yeşil </td>      <td> Yeşil </td>    </tr> </table>	Yeşil Yeşil Yeşil

Burada çıkan sonuç şudur eğer bir satıra aynı rengi vereceksek gidip tek tek hücrelere bgcolor atamak gereksizdir.
Bunun yerine satırı ifade eden <tr> ye bgcolor özelliği vermemiz daha da yerinde olur.
bu renk değil de başka bir özellikte olabilirdi olabilirdi.
örneğin yükseklik satırdaki bütün hücreler için aynı olacağından dolayı yükseklik özelliklerini tr ye belirtmeniz yerinde olacaktır.

Eğer tümden tablonuza aynı rengi verecekseniz bu durumda table etiketine bgcolor belirtmeniz daha yerinde bir kodlama olacaktır.
Farklı olmasını istediğimiz satırın rengini bgcolor ile değiştirebilirsiniz.
Aşağıda farklı renk vermek istediğimiz hücrenin (<td>) bgcolor özelliğine yellow değerini verdik.

HTML Kodu	Oluşan Görüntüsü
<table border=1 bgcolor="green">    <tr>      <td> Yeşil </td>      <td> Yeşil </td>      <td> Yeşil </td>    </tr>    <tr">      <td> Yeşil </td>      <td bgcolor="yellow"> Sarı </td>      <td> Yeşil </td>    </tr>    <tr>      <td> Yeşil </td>      <td> Yeşil </td>      <td> Yeşil </td>    </tr> </table>	Yeşil Yeşil Yeşil Yeşil Sarı Yeşil Yeşil Yeşil Yeşil

şimdi size colspan ve rowspan 'ı da anlatıp bu dersimizi bitirmek istiyorum.
Nedir rowspan?
row satırı ifade eder; rowspan ise satırların birleştirilmesidir.

Çalıştığı Departman	Çalışanın adı ve soyadı	Çalışanın doğum yılı
Muhasebeciler	Hacer Havuz	1963
	Murat Musluk	1975
	Mustafa Muşlu	1984
Satış elemanları	Seçil Sever	1968
	Burak Burma	1944
	Mert Metelik	1980

Normalde tablo bir ızgara gibidir. Fakat bazen ızgara gibi bir yapı işimizi görmez.
Izgara derken her sütun ve satırda aynı sayıda hücrenin olmasını kasdettim.
2. ve 3. sutunda 6 satır varken; birinci sutunda sadece 2 satır vardır.
rowspan=3 ifadesiyle ilgili sütunda iki satır olmasını sağladık.

Yukarıdaki görüntüyü veren HTML kodunu lütfen üzerinde düşünerek + dikkatlice inceleyip + kendinizde de çalıştırınız.
<TABLE BORDER=2>
    <TR bgcolor=yellow>
            <TD>Çalıştığı Departman </TD>
            <TD>Çalışanın adı ve soyadı </TD> <TD>Çalışanın doğum yılı</TD>
            </TR>
    <TR>

    <TR>
            <TD ROWSPAN=3 BGCOLOR="#99CCFF">Muhasebeciler</TD>
            <TD>Hacer Havuz</TD> <TD>1963</TD>
    </TR>
    <TR>
            <TD>Murat Musluk</TD> <TD>1975</TD>
    </TR>
    <TR>
            <TD>Mustafa Muşlu</TD> <TD>1984</TD>
    </TR>
    <TR>
            <TD ROWSPAN=3 BGCOLOR="#99CCFF">Satış elemanları</TD>
            <TD>Seçil Sever</TD> <TD>1968</TD>
    </TR>
    <TR>
            <TD>Burak Burma</TD> <TD>1944</TD>
    </TR>
    <TR>
            <TD>Mert Metelik</TD> <TD>1980</TD>
    </TR>
</TABLE>


Nedir colspan?
Col ingilizce column ifadesinden bir kısaltmadır. Column sütun anlamına gelir.
colspan ise Sütunları birleştirmek için kullanılır.

Aşağıdaki kodu inceleyip ekranda nasıl bir görüntü oluşturacağını tahmin etmeye çalışınız.
<TABLE BORDER=2>
<TR>
            <td COLSPAN=2 bgcolor="#99CCFF">2005 YILINDA İŞE BAŞLAYANLAR</td>
</TR>
<TR>
            <td>Sezai Serin</td>
            <td>Şubat ayında</td>
</TR>
<TR>
            <td>Melek Mert</td>
            <td>Nisanda</td>
</TR>

<TR>
            <td>Muhammed</td>
            <td>Haziran</td>
</TR>
<TR>
            <td COLSPAN=2 bgcolor="#99CCFF">2006 Yılında işe başlayanlar</td>
</TR>
<TR>
            <td>Cömert Cenk</td>
            <td>Kasım</td>
</TR>
<TR>
            <td>Ece Ercüment</td>
            <td>Aralık</td>
</TR>
<TR>
            <td>Zeynep Zengin</td>
            <td>Haziran</td>
</TR>
</TABLE>



Yukarıdaki HTML kodunun oluşturduğu görüntü aşağıdaki gibidir.

2005 YILINDA İŞE BAŞLAYANLAR
Sezai Serin	Şubat ayında
Melek Mert	Nisanda
Muhammed	Haziran
2006 Yılında işe başlayanlar
Cömert Cenk	Kasım
Ece Ercüment	Aralık
Zeynep Zengin	Haziran

colspan=2 ile bu tablodaki bazı satırlar tek sütunlu yapılmıştır.
Normalde sekiz satır iki sütunlu olan bu tablonun 1. ve 5. satırları tek sütunlu yapılmıştır.
Dikkat ederseniz colspan=2 ifadesinin kullanıldığı <tr> lerde bir tane <td> etiketi kullanılmıştır.
Bu dersimizin de sonuna geldik.
İnşaAllah bir dahaki dersimizde buluşmak üzere diyorum.

Sitetistik
Get your own Chat Box! Go Large!