HTML Table Rowspan ve Colspan / HTML Dersleri info
HTMLDersleri.info; web sitesi hazırlamak istiyorum ama birşey bilmiyorum diyenleri unutmadı. HTML kodları uygulamalı ve basit olarak anlatıldı. HTML dersleri sitesi bir nevi bedava web tasarım kursudur; html body, color, font, title, img, table başlıca HTML etiketleridir. web sitesi yapmak isteyenlerin kullanacağı başlıca HTML etiketleri anlatıldı. HTML dersleri birebir pratik uygulamalardan oluşuyor. Doğru Adrestesiniz.


HTML Dersleri       1     2     3     4     5     6     7     8     9     10     11     12     13    



Referans Bilgiler :       Özel karakterler

 HTML Dersleri
  İlk basamaktan - Orta düzeye kadar

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 KoduOluş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 KoduOluş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 KoduOluş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.








HTML Dersleri       1     2     3     4     5     6     7     8     9     10     11     12     13    


Anasayfa

www.HTMLDersleri.info 16 Ağustos 2007 tarihinde yayına girmiştir. İçeriğin tamamına yakınını yada tamamını alıp yayınlamanız yasaktır. Bu siteye link vererek derslerin bir parçasını alıp yayınlayabilirsiniz.