HTML TABLO ETİKETLERİ VE TABLO OLUŞTURMA

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. 

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 Ö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..