HTML Table 2
Merhaba,
Hemen derse geçebilir miyiz? Cevabınızın evet olduğunu duyar gibiyim 
Bir önceki dersimizde Tablo konusuna başlamıştık.
Hatırlatma (iki hücreli tek satırlı tablo kodu):
<table> <tr> <td></td> <td></td> </tr> </table>
Daha önceki derslerimizde şu özellikleri görmüştük. (HTML etiketi değil özelliklerini gördük)
align
height
width
bgcolor
border
Html etiketlerinin çeşitli özellikleri vardır bu özelliklerden bazıları yukarıdaki gibidir.
Html etiketi ayrı şeydir html etiketinin özelliği ayrı şeydir.
HTML etiketleriyle , etiketlerin özellikleri arasındaki farklar şunlardır.
html etiketleri < > bu iki işaret arasında olur html etiketinin özellikleri de aynı şekilde < > işaretleri arasında olur. Fakat < den hemen sonraki kelime html etiketidir.
< den sonraki kelimenin sonrasında birşeyler varsa onlar da etiketin özellikleridir.
özellik="değeri" şeklinde yazılır ve her özellikle html etiketi arasında MUTLAKA boşluk olmalıdır.
table - tr - td etiketleri de align (hizalama), height (yükseklik), width (genişlik), bgcolor (zemin rengi), border (çerçeve) özelliklerini alabilirler.
Tek hücreli bir tablo yapalım.
| HTML Kodu | Oluşan Görüntüsü | ||
| <table border=4> <tr> <td> </td> <td> </td> </tr> </table> |
|
Burada iki hücrenin içinde de kullanıldı bunun nedeni nedir sizce?
border=4 değerini arttırırsanız şöyle bir görüntü elde edersiniz.
Burada hangi alanın büyüdüğüne dikkat ediniz.
tabloya width (genişlik) özelliği ekleyip width=200 yapalım.
| HTML Kodu | Oluşan Görüntüsü | ||
| <table border=10 width=200> <tr> <td> </td> <td> </td> </tr> </table> |
|
Tablonun boyu 200 piksel oldu (pikselin ne olduğunu ileriki zamanlarda açıklayalım inşaAllah)
fakat siz pikselin bir uzunluk ölçüsü birimi olduğunu bilmeniz gerekir.
yukarıdaki iki hücresi olan (<td> </td> <td> </td>) tabloya genişlik değeri olarak 200 piksel verdik.
Fakat dikkat ederseniz yüksekliğini belirtmediğimiz halde hücrelerin yaklaşık 30 piksel kadar yüksekliği var.
Yukarıda size hücrelerin içine neden yazdığımızı sormuştum.
Herhangi bir yazı yazdığımızda hücreye geçerli olan yazı puntosu (büyüklüğü) kadar yükseklik verilir.
Hücrelerin içi boş olduğu için yükseklik verilemeyeceği için değerini yazmıştık.
Bizim gözümüz orayı boş görse bile olduğu için tarayıcı orayı dolu kabul eder ve oraya geçerli yazı büyüklüğü kadar yükseklik verir.
Tabloya şimdi de 200 genişlikle birlikte 100 piksel de yükseklik verelim.
| HTML Kodu | Oluşan Görüntüsü | ||
| <table border=10 height=100 width=200> <tr> <td> </td> <td> </td> </tr> </table> |
|
Şimdi hücrelerin içine birşeyler yazalım ve zemin rengi verelim.
İstersek tabloya zemin rengi verebileceğimiz gibi hücrelere ayrı ayrı da zemin rengi verebiliriz.
Tabloya zemin rengi verirsek bütün hücrelerin zemin rengini bir seferde vermiş oluruz.
Birinci hücrenin içine web dersleri yazıyoruz.
| HTML Kodu | Oluşan Görüntüsü | ||
| <table border=1 height=100 width=200> <tr> <td> Web dersleri </td> <td> </td> </tr> </table> |
|
Dikkat ederseniz tablonun genişlik değeri olan 200 piksel iki hücre arasında dağıtılırken eşit dağıtılmadı ama adaletli dağıtım oldu.
Adaletli dağıtım diyorum çünkü 1. hücremizin ihtiyacı fazla ama ikinci hücrenin ihtiyacı az.
Şimdi align özelliğini kullanalım.
align özelliğinin alabildiği değerleri hatırlayalım : right (sağ) - left (sol) - center (ortalı)
<td align=center> web dersleri </td> şeklinde olduğunda (ORTALI)
| Web dersleri |
<td align=right> web dersleri </td> şeklinde olduğunda (SAĞA HİZALI)
| Web dersleri |
Dikkat ederseniz web dersleri ifadesini ilk yazdığımızda sola hizalı gösterildi (web tarayıcısı tarafından).
Biz align=left demediğimiz halde (align konusunda hiçbirşey belirtmediğimiz halde sola hizalı yazıldı).
Eğer buna rağmen align=left diye hizalama belirtirsek nedenimiz şu olabilir;
Bazı web sayfası tarayıcılarının geçerli değeri (hiçbir hizalama belirtilmediği durumunda) hizalamaları değişik olabilir.
Biz webmasterlar web sitesi yaptığımızda bir tek tarayıcı için yapmamalıyız.
Birçok tarayıcıyı dikkate alarak web sayfası yaparsak daha başarılı bir sonuç elde etmiş oluruz.
bgcolor özelliğine de değindikten sonra bu dersimizi bitirelim inşaAllah.
| HTML Kodu | Oluşan Görüntüsü | ||
| <table width=300 border=1> <tr> <td bgcolor="yellow"> Web dersleri </td> <td> </td> </tr> </table> |
|
Bir dahaki dersimizde tablo konusuna devam edeceğiz inşaAllah
Size verebileceğim ödevler şunlar:
align | height | width | bgcolor | border özelliklerine çeşitli değerler vererek aşağıdaki tablo tiplerini çalışınız.
a) 3 satır 4 sutunlu bir tablo
b) 4 satır 1 sutunlu bir tablo
c) 1 satır 1 sutunlu bir tablo
d) 1 sutun 4 satırlı bir tablo
Bir dahaki dersimizde buluşmak dileğiyle hoşça kalın.
