Tablolar

Tablolar, sayfaları satırlara ve sütunlara bölmek ya da metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak için kullanabileceğimiz Html in en önemli yapıtaşlarındandır.

Tablolar satırlar ve sütunlardan meydana gelir.Html de tablo oluşturmak için <table>, satır oluşturmak için <tr>, sütun oluşturmak için <td> etiketleri kullanılır.

Tablo oluşturma etiketinin genel yapısı:

border = tablonun kenar kalınlığı

height = tablonun yükseliği

width = tablonun genişliği

align = tablonun sayfa içindeki hizası

bgcolor = tablonun arkaplan rengi

Basit tablo oluşturma örnekleri;

İlk örnekte border parametresi kullanılmadığı için çerçeve oluşturuldu, fakat; kenarları görüntülenmedi.İkinci örnekte border parametresi kullanıldığı için tablonun kenarları gözüktü.Bu değer daha da artırılırsa kenar kalınlığının daha belirgin bir hal aldığını yukarıdaki kodlar üzerinde deneyerek görebilirsiniz.Bunun yanı sıra ikinci tabloda hizlama parametresi ile tablo, sayfanın ortasına alındı.

Tablo ve hücre rengini değiştirme:

Tablolarda renk değiştirme işlemi daha önceki derslerimizde anlatılan bgcolor parametresi ile yapılır.Tablonun tümüne tek bir renk verilebileceği gibi, tek tek hücrelere istenilen renkler verilebilir.

Tablonun tamamına renk vermek için bgcolor parametresi, <table> etiketinin içine, hücrelere renk vermek için ise renk vermek istenilen hücreye ait <td> etiketinin içine yazılır.

Tablolarda satır ve sütun birleştirme:

Tablo oluştururken, istenilen satır veya sütunlar birleştirilebilir.

rowspan = "Birleştirilecek satır sayısı"

colspan = "Birleştirilecek sütun sayısı"

Örnekler;

<td rowspan="2">Hücre içeriği</td> ==> İki satır birleştirilmiş
<td colspan="3">Hücre içeriği</td> ==> Üç sütun birleştirilmiş

Aşağıdaki tabloda hem satır birleştirme hem de sütun birleştirme yapılmıştır.Sizde önce aşağıdaki görülen tabloyu yapmaya çalışın.Daha sonra aşağıda verilen kod örnekleri ile bu tablonun nasıl yapıldığını inceleyin.

1	2		3
4	5	6	7	8
9	10	11	12	13
9	14	15	16	17

Tabloya ait html kodları;

Tablo oluşturmaya ait diğer özellikler:

Hücreler arası genişlik ayarı cellspacing parametresi ile yapılır.

cellspacing = " sayı "

<table cellspacing="5">....</table> ==> iki hücre arasındaki uzaklık 5 piksel olur.

Hücer içinde , hücre kenarı ile hücre içeriği arasındaki mesafe cellpadding parametresi ile ayarlanabilir.

cellpadding = "sayı"

<table cellpadding="10">....</table>

Hücrelerde başlık yazmak için, <th> etiketi kullanılır.

<th>Hücrelere ait başlık</th>

Anlatılanlara ait örnek kodlar aşağıdadır.Sizde bu kodlar üzerinde değişiklikler yaparak, meydana gelecek değişimleri gözlemek suretiyle konuyu daha iyi kavrayabilirsiniz.

Hücre başlığı için kullanılan <th> etiketinin arasına yazılan metne kalınlık özelliği verdiğine dikkat ediniz.Sizde hücrelerinize daha önceki derslerde anlattığımız metin biçimlendirme etiketlerini kullanarak, istediğiniz düzenlemeleri yapabilirsiniz.