Html ile tablolar

Bir tablo web sitesinin olmazsa olmazlarındadır. Bu metinimde bir tablo nasıl oluşturmayı satır satır anlatmaya çalışacağım.Öncelikle tablo oluşturmak için bir etiket(tag) kullanmamız gerekecektir. Bu etiket <table> etiketidir. Etiketin kapatılması zorunludur ve etiket kapatılmadığı anda site hatalar oluşması söz konusu olacaktır.

Şimdi örnek olarak bir tablo oluşturalım. Tablomuz 4 satır ve 3 sütunda oluşsun.

<table>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

Görmüş olduğunuz gibi tablomuzu oluştururken farkıl iki etiket kullandık. Bunlardan bir tanesi satırlarımızı oluşturmak için <tr> etiketi diğeri ise her satır içinde sütunlarımızı oluşturma <td> etiketidir.

Bir tablo oluşturmak bu kadar kolay görünüyor alabilir. Tabi işin detayına indiğimizde bu tablonun arkaplan renki, satır ve sütun arasındaki mesafeler, tabloda çerçeve kullanılıp-kullanılmayacayağı, tarayıcı uyumluluğu, satırlar birleştirilicek mi? sütunlar bir satır içindemi olucak, tablonun yüksekliği ve genişliği ne olacak bunların belirlenmesi için table etiketinin özelliklerini kullanımamız gerekecektir.

En kolayından başlayalım ve bir tablonun yüksekliği ve genişliği ayarlayalım. Boyutlandırma iki şekilde oluyor. ilki sabit konumlandırma diğeri ise yüzde li değer vermektir.

Sabit konumlandırma:

<table width="400px" height="300px"> şeklinde bir düzenleme yapmamız sabit konumlandırmamız için yeterli olacaktır.

Yüzdeli konumlandırma:

<table width="80%" height="70%"> şeklinde bir düzenleme yapmamız yüzdeli konumlandırmamız için yeterli olacaktır.

Tabloda çerçeve kullanımınında basit bir kullanımı vardır. Şöyleki çerçeve kullanacağınız tablonun border özelliğine tamsayı olarak değer vermeniz çerçeve yi verdiğiniz değer boyutunda oluşturacaktır. Sıfır vermeniz taktirde tabloda çerçeve olmayacaktır. Tablonun border özelliğini sıfır vermeniz önerilir. Nedeni normal tanımlamalarda Firefox border özelliğini hatalı görüntü olarak ekranda gösterecektir. Bununda bir farklı yolu var bunu da sizelere CSS bölümünde anlatmaya çalışıcam.

Kullanımı:

<table width="400px" height="300px" border="2">

Gelelim tabloda arkplan rengi kullanımına. Bunda da iki kullanım vardır. ilki renk değerini RGB cinsinden vermek, diğeri ise ilgili rengin ingilizce karşılığını yazmaktır. Bunuda style kullanarak yapacağız.

RGB li arkaplan:

<table width="400px" height="300px" border="2" style="background-color:#f00"> şeklinde kullanımı arkaplan rengini kırmızı yapacaktır.

ingilizce arkaplan:

<table width="400px" height="300px" border="2" style="background-color:red"> bu şekilde kullanımda tablonun arkaplanını kırmızı yapacaktır.

Hangisini önerirsen derseniz ben RGB li kullanımını tercih etmenizi öneririm. Böylelikli daha çok renk elde edebilirsiniz.

Tabloda satır ve sütunlar arasındaki boşluk değerini ise cellspadding ve colspadding ile ayarlayabilirsiniz. Kullanımı basittir.

Kullanımı:

<table width="400px" height="300px" border="2" style="background-color:red" cellspadding="1" colspadding="1">

Ve son olarak satır ve sütunları birleştirmeyi anlatmaya çalışıcam. Bunu yeni bir örnekle anlatmak herhalde hem sizler için hemde benim için daha kolay ve ankaşılır olacaktır.

Bir tablo oluşturalım ve bu tablonun arkaplan rengi gri olsun ve satır vesütunlar arasındaki boşluk 1 olsun. Alttaki resim gibi bir görüntüyü oluşturmaya çalışacağız.

<table width="200px" height="200px" border="1" celspadding="1" colspadding="1" style="background-color:#999">
<tr style="background-color:red">
<td colspan="2">Tablo oluşturmak</td>
</tr>
<tr>
<td style="background-color:green">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td style="background-color:blue">4</td>
</tr>
</table>

Görmüş olduğunuz gibi colspan ile 2 sütunu birbirine birleştirdim ve içine Tablo oluşturmak diye bir text yazdım.

Son olarak bir özelliğinden de bahsedebilirim. Bu de tablonun sayfa içinde nerede olacağını ayarlayır. Bu özellik align özelliği. üç parametresi var. Standart olarak left kullanılır. Bu parametre dışında right ve center parametreleri vardır. Tablo içindelki sütunlara uygulandığı taktirde ilgili sütunun içindeki nesneyi sola, sağa ya da ortaya yaslamaya yarar.

Bu dersimizde burada sona eriyor.Diğer derslerde buluşmak üzere. Herhangi bir sorunuz olursa yazdığınız taktirde en kısa zaman içinde cevaplamaya çalışacağım.