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> |
|
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> |
|
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> |
|
ş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 |
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şallah Başka derslerde görüşme imkanı buluruz.O zamana Kadar hoşçakalın...
