Eski web sitelerinin ana çatısını oluşturan şimdi ise sayfa içeriklerinde oldukça fazla kullanılan tabloları <table></table> etiketleri ile oluşturuyoruz. Bildiğiniz gibi tablolar satır ve sütunlardan oluşur . Satır ve sütunların kesişimi ile oluşan bölümlere de hücre denir.
HTML 5 öncesinde tablolar sadece satır ve sütunlardan oluşurken , HTML 5 ile tablolara farklı bölümler eklendi. İkisinide inceleyelim...
KLASİK HTML TABLO YAPISI
Tabloların satır ve sütunlardan oluştuğunu söylemiştik . Sürümünden bağımsız olarak klasik HTML tablolarında 3 temel etiket kullanıyoruz.
| <TABLE> | <TR> | <TD> |
| (tablo) : Tablo yapısını başlatan etikettir. Tablo le ilgili tüm etiketler <table> </table> etiketleri içerisinde yer alır. | (table row) : Tablo satırı anlamına gelir. Tablonun satırlarını oluşturur. | (table column) : Tablo sütunu anlamına gelir. Tablonun sütunlarını (hücrelerini) oluşturur. |
| border : tablo kenarlığı | ||
Tablolar oluşturulurken önce satır <tr> oluşturulur sonra bu satır içinde sütunlar <td> (hücreler) oluşturulur.
Örneğin 1 satır * 1 sütun tablonun kodları aşağıdaki gibi olacaktır.
<table>
<tr>
<td> 1. Sütun </td>
<td> 2. Sütun </td> <!- 1. SATIR -->
<td> 3. Sütun </td>
</tr>
</table>
Ekran Görüntüsü
TABLO PARAMETRELERİ
Tabloların daha estetik , düzgün bir görünüm alması için kenarlık, kenarlık rengi , hücreler arası boşluk, hücre içi boşluk , genişlik ve hizalama gibi özellikleri kullanılabilir.
-- BORDER (KENARLIK)
Border, tablo kenarlığını belirler ve varsayılan oalrak 0'dır. Dolayısı ile herhangi bir border değeri vermezsek tablo kenarları görünmeyecektir. Border değerini 1 yaparak görelim.
border="1"
<table border="1">
<tr>
<td> 1. Sütun </td>
<td> 2. Sütun </td> <!- 1. SATIR -->
<td> 3. Sütun </td>
</tr>
</table>
Ekran Görüntüsü
-- BORDERCOLOR (KENARLIK RENGİ)
Tablo kenarlıklarına bordercolor ile renk verebiliriz. Renkler ingilizce karşılığı oluğu gibi , renk kodları ile de belirtilebilir.
bordercolor="orange"
<table border="1" bordercolor="orange">
<tr>
<td> 1. Sütun </td>
<td> 2. Sütun </td> <!- 1. SATIR -->
<td> 3. Sütun </td>
</tr>
</table>
Ekran Görüntüsü
-- CELLSPACING (HÜCRELER ARASI BOŞLUK)
Daha güzel bir görünüm için diğer parametreleride ekleyebiliriz. Örneğin dikkat ederseniz hücrelerin birbirleriyle ve tablo kenarlarıyla aralarında boşluklar var. Bu boşluk cellspacing parametresi ile kontrol edilebiliyor. Cellspacing, hücreler arası boşluk anlamına gelir. Varsayılan birimi pikseldir. Önce "0" sonra "10" deneyelim.
cellspacing="0"
<table border="1" cellspacing="0">
<tr>
<td> 1. Sütun </td>
<td> 2. Sütun </td> <!- 1. SATIR -->
<td> 3. Sütun </td>
</tr>
</table>
Ekran Görüntüsü
cellspacing="10"
<table border="1" cellspacing="10">
<tr>
<td> 1. Sütun </td>
<td> 2. Sütun </td> <!- 1. SATIR -->
<td> 3. Sütun </td>
</tr>
</table>
Ekran Görüntüsü
Hazırlayacağınız tablonun özelliklerine ve istediğiniz görünüme göre cellspacing değerini değiştirebilirsiniz.
-- CELLPADDING (HÜCRE İÇİ BOŞLUK)
Cellpadding hücre içi boşluk anlamına gelir. Yani hücre içeriği ile hücre kenarları arasındaki boşluk değeridir. Kullanılmadığında hücre içindeki yazılar hücre kenarlarına yapışır. Varsayılan birimi pikseldir. Tabloya cellpadding="5" ekleyelim..
cellpadding="5"
<table border="1" cellspacing="10" cellpadding="5">
<tr>
<td> 1. Sütun </td>
<td> 2. Sütun </td> <!- 1. SATIR -->
<td> 3. Sütun </td>
</tr>
</table>
Ekran Görüntüsü
Dikkat ederseniz cellpadding kullanınca hücre içindeki yazı kenarlardan uzklaştı ve daha güzel bir görünüm aldı. Yine hazırlayacağınız tablonun özelliklerine ve istediğiniz görünüme göre cellpadding değerini değiştirebilirsiniz.
-- WIDTH (GENİŞLİK)
Width ile tablo yada sütun genişlikleri ayarlanabilir. Varsayılan birimi pikseldir. Ancak yüzde, rem gibi birimlerde uygulanabilir. Örneğin tabloya 500px genişlik uygulayalım.
width="500px" (table)
<table border="1" cellspacing="10" cellpadding="5" width="500">
<tr>
<td> 1. Sütun </td>
<td> 2. Sütun </td> <!- 1. SATIR -->
<td> 3. Sütun </td>
</tr>
</table>
Ekran Görüntüsü
Tabloya genişlik değeri verdiğimizde, sütunlar bu genişliğe ve içeriklerine göre , tablo genişliğini geçmeyecek şekilde otomatik boyutlanırlar. Herhangi bir sütunun genişliğini sabit tutmak istersek, o sütunada genişlik değeri vermemiz gerekir. Bunun için sütundaki tüm hücrelere değil sadece o sütunun en üst hücresine genişlik vermemiz yeterli olacaktır. Örneğin 2. sütun genişliğini 100px yapalım.
width="100px" (2. sütun))
<table border="1" cellspacing="10" cellpadding="5" width="500">
<tr>
<td> 1. Sütun </td>
<td width="100"> 2. Sütun </td> <!- 1. SATIR -->
<td> 3. Sütun </td>
</tr>
</table>
Ekran Görüntüsü
2. sütun genişliği 100px yapıldığında, tablonun kalan genişliği 1 ve 3. sütunlar arasında paylaştırılmış oldu.
-- HEIGHT (YÜSEKLİK)
Height ile tablo yada satır yükseklikleri ayarlanabilir. Varsayılan birimi pikseldir. Ancak yüzde, rem gibi birimlerde uygulanabilir. Örneğin tabloya 500px yükseklik uygulayalım.
height="500px" (table)
<table border="1" cellspacing="10" cellpadding="5" width="500" height="200">
<tr>
<td> 1. Sütun </td>
<td> 2. Sütun </td> <!- 1. SATIR -->
<td> 3. Sütun </td>
</tr>
</table>
Ekran Görüntüsü
Tabloya yükseklik değeri verdiğimizde, satırlar bu yükseliğe ve içeriklerine göre , tablo yüksekliğini geçmeyecek şekilde otomatik boyutlanırlar. Herhangi bir satırın yüksekliğini sabit tutmak istersek, o satırada ayrıca yükseklik değeri vermemiz gerekir. Yukarıdaki tabloda tek satır olduğu için , tabloya yada satıra verilen yükseklk arasında fark olmayacaktır.
Satıra 100px yükseklik verelim..
height="100px" (1.. satır))
<table border="1" cellspacing="10" cellpadding="5" width="500">
<tr height="100">
<td> 1. Sütun </td>
<td> 2. Sütun </td> <!- 1. SATIR -->
<td> 3. Sütun </td>
</tr>
</table>
Ekran Görüntüsü
Satır yükseliği 100px oldu ancak tablonun yükseklğini 200px bıraksaydık , satıra verilen 100px yükseklk geçersiz olacak ve tablo yüksekliği 200px olacaktı.... (tek satır olduğu için)
-- ALIGN (YATAY HİZALAMA)
Tablonun yada hücre içindeki yazıların YATAYDA hizalanmasını sağlar. Left (sol) , Right (sağ), Center (orta) ve Justify (İki yana yasla) değerlerini alır. Tabloya uyguladığımızda , tablonun sayfadaki yatay konumunu belirler. Satır yada sütuna uyguladığımızda ise hücre içindeki yazıları yada varsa başka nesneleri hizalar. 4 değer alır.
left : Sola hizalı
right: Sağa HizaLI
center : ortalanmış
justify : iki yana yaslı
Hem tabloyu hemde hücre içi yazıları ortalayalım...
align="center" (tablo ve tr)
<table border="1" cellspacing="10" cellpadding="5" width="500" align="center">
<tr align="center">
<td> 1. Sütun </td>
<td width="100"> 2. Sütun </td> <!- 1. SATIR -->
<td> 3. Sütun </td>
</tr>
</table>
Ekran Görüntüsü
Tablo sayfada ortalanırken, satıra eklediğimiz align=center ile satır çindeki tüm hücrelerin içindeki yazılar da hizalanmış oldu.
-- VALIGN (DİKEY HİZALAMA)
Hücre içindeki yazıların yada nesnelerin DİKEYDE hizalanmasını sağlar. Top (üst) , Bottom (alt), Center (orta) değerlerini alır. Hem satıra hemde sütuna uygulanabilir. Valign etkisini tam görebilmek için , satır yüksekliğinin varayılandan daha yüksek bir değerde olması gerekir.
top: üst kenara dayalı
bottom: alt kenara dayalı
center: ortalanmış
aşağıda yükseliği 70px yapılmış satır hücrelerinin (td) içindeki yazıları yatayda ortalanmış , dikeyde ise sırasıyla üst - orta- alt olarak hizalayalım...
<table border="1" cellspacing="10" cellpadding="5" width="500" align="center">
<tr align="center" height="70">
<td valign="top"> 1. Sütun (top) </td>
<td valign="center"> 2. Sütun (center) </td> <!- 1. SATIR -->
<td valign="bottom"> 3. Sütun (bottom) </td>
</tr>
</table>
Ekran Görüntüsü
-- BGCOLOR (ARKA PLAN RENGİ)
Body etiketinde kullandığımız bgcolor etiketi , tablolardada kullanılabilir. Genel olarak tabloya verilebileceği gibi , sadece satıra yada sütunada verilebilir. Renkler belirtilirken, ingilizce karşılıkları yazılabileceği gibi ,renk kodları da kullanılabilir. İnternet üzerinde renklerin kodlarına ve ingilizce isimlerine ulaşab,ilirsiniz. Örneğin : HTML RENKLER
Tüm tabloya "lightskyblue" arka planı verelim...
tablo bgcolor="lightskyblue"
<table border="1" cellspacing="10" cellpadding="5" width="500" align="center" bgcolor="lightskyblue">
<tr align="center" height="70">
<td valign="top"> 1. Sütun (top) </td>
<td valign="center"> 2. Sütun (center) </td> <!- 1. SATIR -->
<td valign="bottom"> 3. Sütun (bottom) </td>
</tr>
</table>
Ekran Görüntüsü
Tüm tablonun arka plan rengini mavi (lightskyblue) yapmış olduk. Şimdide , satıra "Aquamarine" arka planı verelim...
tr bgcolor="Aquamarine"
<table border="1" cellspacing="10" cellpadding="5" width="500" align="center" bgcolor="LightSkyBlue">
<tr align="center" bgcolor="Aquamarine">
<td > 1. Sütun (top) </td>
<td > 2. Sütun (center) </td> <!- 1. SATIR -->
<td > 3. Sütun (bottom) </td>
</tr>
</table>
Ekran Görüntüsü
Tablo arka plan rengi mavi (lightskyblue) kalırken ,tüm satırın arka plan rengi yeşil (Aquamarine) oldu... Bu kezde sadece 2. hücreye (td) kırmızı (tomato) rengi verelim...
2. hücre bgcolor="tomato"
<table border="1" cellspacing="10" cellpadding="5" width="500" align="center" bgcolor="LightSkyBlue">
<tr align="center" bgcolor="Aquamarine">
<td > 1. Sütun </td>
<td bgcolor="tomato"> 2. Sütun </td> <!- 1. SATIR -->
<td > 3. Sütun </td>
</tr>
</table>
Ekran Görüntüsü
Sadece 2. sütun rengini değiştirmiş olduk. Satır ve Tablo arkaplanları kendi renklerinde kaldılar. Bu şekilde isteiğiniz satır yada sütuna renkler verebilirsiniz...
YENİ SATIRLAR
Her yeni satır için bir <tr> etiketi ve ona ait <td> etiketleri eklenmelidir. Satırları ve içindeki sütunları eklerken tüm satırlardaki TD ayılarının aynı olmasına dikkat etmelisniz. Bir satırda daha fazla yada daha az bir sütun olması , tablonun düzgün oluşmamasına sebep olur.
Örneğin sayfaya ortalanmış , turuncu kenarlıklı , 50% genişliğe sahip , hücre boşlukları ayarlanmış 3 satır 3 sütun tablo aşağıdaki gibi olacaktır.
HTML KODLARI
<table border="1" align="center" width="50%" cellspacing="0" cellpadding="10" bordercolor="orange">
<tr align="center">
<td> 1. Sütun </td>
<td> 2. Sütun </td> <!- 1. SATIR -->
<td> 3. Sütun </td>
</tr>
<tr align="center">
<td> 1. Sütun </td>
<td> 2. Sütun </td> <!- 2. SATIR -->
<td> 3. Sütun </td>
</tr>
<tr align="center">
<td> 1. Sütun </td>
<td> 2. Sütun </td> <!- 3. SATIR -->
<td> 3. Sütun </td>
</tr>
</table>
HTML 5 TABLO YAPISI
HTMl 5 tabloları 3 bölümden ve bir açıklama yazısından oluşur. THEAD (TABLO BAŞLIĞI) , TBODY (TBLO İÇERİĞİ) , TFOOT (TABLO BİTİŞİ) .. CAPTION (Açıklama). Her bölümün kendi satır ve sütunları bulunur. Satır sütun mantığı klasik HTML tablolarda olduğu gibidir. Ancak Başlık ve Bitiş bölümlerindeki hücrelerin vurgulanması için (kalın) sütunlar <th> etiketi ile oluşturulur.
THEAD
Tablonun başlık satırını oluşturur. Burada tablodaki sütunların anlamları , isimleri yazılır. SEO için düşünülmüştür. Yani tarayıcılar, table etiketi içerisinde thead etiketini gördüğünde , bu bölümün tablodaki verilerin ne olduğu hakkında bilgi verdiğini anlarlar. Ayrıca içerik fazla olduğunda kaydırma çubuğu kullanıldığında bu bölüm sabit kalabilir. Buradaki hücrelerin belirgin olması için <th> sütun etiketi kullanılır. THEAD etiketinin kullanılması zorunlu değildir.
<thead>
<tr>
<th> Ay </th>
<th> Gelir </th>
<th> Gider </th>
</tr>
</thead>
TBODY
Tablonun içerik satırlarını oluşturur. SEO için düşünülmüştür. Yani tarayıcılar, table etiketi içerisinde tbody etiketini gördüğünde , bu bölümdeki satırların tablonun asıl içeriği olduğunu anlarlar.
<tbody>
<tr>
<th> Eylül </th>
<td align="center"> 1000 </td>
<td align="center"> 800 </td>
</tr>
<tr>
<th> Ekim </th>
<td align="center"> 800 </td>
<td align="center"> 150 </td>
</tr>
<tr>
<th> Kasım </th>
<td align="center"> 1500</td>
<td align="center"> 650</td>
</tr>
</tbody>
TFOOT
Tablonun bitiş satırını oluşturur. Burada tablodaki sütunların toplamları , sonuçları gibi bilgiler yazılabilir. SEO için düşünülmüştür. Yani tarayıcılar, table etiketi içerisinde tfoot etiketini gördüğünde , bu bölümün tablodaki verilerin sonuçları hakkında bilgi verdiğini anlarlar. Ayrıca içerik fazla olduğunda kaydırma çubuğu kullanıldığında bu bölüm sabit kalabilir. Buradaki hücrelerin belirgin olması için <th> sütun etiketi kullanılır.
<tfoot>
<tr>
<th> Toplam </th>
<th> 3300 </th>
<th> 1600 </th>
</tr>
</tfoot>
<TH>
Tablonun başlık ve bitişi bölümlerindeki hücre yazılarının belirgin olması için kullanılır. Buradaki yazıları kalınlaştırır.
<th> Toplam </th>
<CAPTION>
Tablonun adını , açıklamasını gösterir. Tablo üstünde yada altında kullanılabilir.
<caption> HTML5 Gelir Gider Tablosu</caption>
HTML 5 ile gelen bu semantik tablo etiketlerinin, pratikte kullanılması zorunlu değildir. Ancak tablonun kod tarafında rahat okunması , seo ve css biçimlendirmeleri için yararlı olacaktır.
HTML 5 ÖRNEK TABLO
HTML5 ile aylara göre gelir gider tablosu yapalım..
<table border="1" width="50%" cellspacing="0" align="center">
<caption> HTML5 Gelir Gider Tablosu</caption>
<thead>
<tr>
<th> Ay </th>
<th> Gelir </th>
<th> Gider </th>
</tr>
</thead>
<tbody>
<tr>
<th> Eylül </th>
<td align="center"> 1000 </td>
<td align="center"> 800 </td>
</tr>
<tr>
<th> Ekim </th>
<td align="center"> 800 </td>
<td align="center"> 150 </td>
</tr>
<tr>
<th> Kasım </th>
<td align="center"> 1500</td>
<td align="center"> 650</td>
</tr>
</tbody>
<tfoot>
<tr>
<th> Toplam </th>
<th> 3300 </th>
<th> 1600 </th>
</tr>
</tfoot>
</table>
Görüşmek Üzere..
