wWw.Cs-İciN-hErSey.Tr.Gg

Counter-Strike İçin Hersey Burada...

Açıklama

Counter-Strike İçin Aradığınız Çoğu Bilgiyi Sitemizde Bulabilirsiniz...

Cs,Cfg,Wall,Config,Rc,Sxe,Clan Map.....Yani Cs İçin Herşey.

Site Sahibi Facebook Profili...


COUNTER-STRİKE CS-İCİN-HERSEY.TR.GG

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.
Bugün 52 ziyaretçi (114 klik) Kişi Burdaydı.

Sitetistik
Get your own Chat Box! Go Large!


=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=