Tablo Oluşturma
HTML'de tablolar <table> koduyla başlar, </table> koduyla biter. HTML'de tabloyu satır satır tanımlayarak kodlarız. Biliyoruz ki her tabloda en az bir satır vardır; HTML'de satır kodları <tr> (table row) koduyla başlar ve </tr> koduyla biter. Tabi her satırda kaç hücre (sütun) olacağı da belirtilmeli. Her satırda en az bir hücre vardır ve satırdaki her hücre HTML'de <td> (table data) koduyla başlar ve </td> biter.
Tabi pek birşey anlamadınız. Basit bir uygulama yaparsak, yukarıda anlattıklarım daha iyi anlaşılacaktır. Mesela 3 satırlı 3 sütunlu bir tablo yapalım.
Kod: Tümünü seç
<html>
<head>
<title>BASİT TABLO TASARIMI</title>
</head>
<body>
<table>
<tr>
<td>Yazar</td>
<td>Ülke</td>
<td>Kitap</td>
</tr>
<tr>
<td>Mario Llosa Vargas</td>
<td>Peru</td>
<td>Julia Teyze</td>
</tr>
<tr>
<td>Isabelle Allende</td>
<td>Şili</td>
<td>Eva Luna</td>
</tr>
</table>
</body>
</html>
Tablo Sınır Çizgisi
Tabi uygulamada yaptığımız tablo pek birşeye benzemedi. Çünkü kupkuru <table> kodu sadece tablonun olduğunu belirtir, tabloyu biçimlendirmek için bazı parametrelere ihtiyacımız vardır. Bunlardan bir tanesi de border (sınır/çerçeve) parametresidir; tablo çerçevesinin kalınlığını gösterir. border parametresi için varsayılan değer 0'dır. Tablonun kaç hücreden oluştuğunu daha rahat görebilmeniz için border değerini 1 olarak alıyorum. Aynı örnekte deneyelim:
Kod: Tümünü seç
</head>
<body>
<table border="1">
<tr>
<td>Yazar</td>
<td>Ülke</td>
<td>Kitap</td>
</tr>
<tr>
<td>Mario Llosa Vargas</td>
<td>Peru</td>
<td>Julia Teyze</td>
</tr>
<tr>
<td>Isabelle Allende</td>
<td>Şili</td>
<td>Eva Luna</td>
</tr>
</table>
</body>
</html>
above Sadece hücre üstlerindeki sınır çizgilerini gösterir.
below Sadece hücre altlarındaki sınır çizgilerini gösterir.
vsides Sadece düşey sınır çizgilerini gösterir.
hsides Sadece yatay sınır çizgilerini gösterir.
rhs Sadece sağ düşey sınır çizgilerini gösterir.
lhs Sadece sol düşey sınır çizgilerini gösterir.
box Tüm sınır çizgilerini gösterir.
border Tüm sınır çizgilerini gösterir.
void Sınır çizgilerini göstermez.
Not: frame parametresini sadece IE4 ve üstü destekliyor.
frame parametresine benzeyen bir başka parametre de rules parametresi. Bu parametre de sadece IE ve üzeri gözatıcılar tarafından destekleniyor. Parametreye şu değerleri verebilirsiniz:
rows Sadece satır çizgilerini gösterir.
cols Sadece sütun çizgilerini gösterir.
all Tüm çizgileri gösterir.
groups Sadece tablonun etrafındaki çizgileri gösterir.
none Sınır çizgilerini göstermez.
Tablo Boyutlandırma
Evet, artık çerçevesi olan bir tablomuz var. Ama tablomuzun ve hücrelerinin boyutları pek güzel değil, HTML hücrelerin genişliğine göre ölçüler belirlemiş kendince. Bu gibi ölçüleri HTML'in insafına bırakmamalıyız. Bu nedenle <table> ve <td> kodları için width (genişlik) ve height (yükseklik) parametrelerini kullanacağız. Bu parametrelere piksel cinsinden değerler verebildiğimiz gibi, yüzde oranları da verebiliriz. Mesela "100%", "50%" vb. (İngilizcede yüzde işareti rakamların sonuna yazılır, tabi HTML'de de). Aşağıdaki uygulamaya bakalım.
Kod: Tümünü seç
<html>
<head>
<title>Tablo Ölçülendirme</title>
</head>
<body>
<table border="1" width="90%">
<tr>
<td width="200">Yazar</td>
<td width="20%">Ülke</td>
<td>Kitap</td>
</tr>
<tr>
<td>Mario Llosa Vargas</td>
<td>Peru</td>
<td>Julia Teyze</td>
</tr>
<tr>
<td>Isabelle Allende</td>
<td>Şili</td>
<td>Eva Luna</td>
</tr>
</table>
</body>
</html>
Hücreler Arası ve Hücre İçi Boşluklar
Tablomuz daha güzel oldu. <table> koduna başka ayarlamalar da yapabiliriz. Örneğin cellpadding parametresiyle, hücre içindekilerle hücre çizgisi arasındaki boşluğu ayarlayabiliriz. Veya cellspacing ile hücreler arasındaki boşluğu ayarlayabiliriz. Hemen uygulamayla deneyelim:
Kod: Tümünü seç
<html>
<head>
<title>Tablo Biçimlendirme</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="2" width="90%">
<tr>
<td width="200">Yazar</td>
<td width="20%">Ülke</td>
<td>Kitap</td>
</tr>
Tablomuz çok daha şık oldu. Son uygulamada ne yaptık? Hücreler arasındaki boşluğu sıfırladık, böylece tablomuz hücre hücre değil, çizgilerle bölünmüş mazgal haline büründü. Başka ne yaptık? Bir de hücre çizgisi ile hücre içindeki yazılar arasındaki boşluğu "2" olarak artırdık. Sizler bu rakamlarla oynayarak nelerin değişeceğini gözlemleyebilirsiniz.
Hücre İçi Hizalama
Tablodaki hücreler içinde bulunan yazıların hangi yana yaslanacağını align ve valign parametreleriyle belirleyebiliriz. Bu parametreler <table>, <tr> veya <td> kodlarına uygulanabilir. align parametresini daha önceki bölümlerden biliyoruz, hücre içindeki donatıyı (metin, resim vb.) sağa, sola veya ortaya yaslamasını sağlar. valign ise hücre içindeki donatıyı aşağı, yukarı veya ortaya (bottom, top, center) yaslamaya sağlar. Bu iki parametreyi birden uygulayarak, karma yaslamalar yapabiliriz: (solyukarı, ortaaşağı, vb.) Aşağıda bu karma yaslamalara bakalım:
Kod: Tümünü seç
<html>
<head>
<title>Tablo Hizalama</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="1" width="90%">
<tr valign="top" height="50">
<td width="200" align="right">Yazar</td>
<td width="20%" align="center">Ülke</td>
<td align="left">Kitap</td>
</tr>
<tr valign="bottom" height="50">
<td align="right">Mario Llosa Vargas</td>
<td align="center">Peru</td>
<td align="left">Julia Teyze</td>
</tr>
<tr valign="center" height="50">
<td align="right">Isabelle Allende</td>
<td align="center">Şili</td>
<td align="left">Eva Luna</td>
</tr>
</table>
</body>
</html>
Arkaplan Tablo (veya Hücre) Rengi
Tablo biçimi için <table> ve <td> kodları için bir başka parametre bgcolor parametresidir. Bu parametre arka plan rengini değiştirir. Hemen uygulamaya bakalım:
Kod: Tümünü seç
<html>
<head>
<title>Tablo Renklendirme</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="2" width="90%">
<tr>
<td width="200" bgcolor=yellow>Yazar</td>
<td width="20%" bgcolor=yellow>Ülke</td>
<td bgcolor=yellow>Kitap</td>
</tr>
<tr>
<td bgcolor=blue>Mario Llosa Vargas</td>
<td bgcolor=blue>Peru</td>
<td bgcolor=blue>Julia Teyze</td>
</tr>
<tr>
<td bgcolor=orange>Isabelle Allende</td>
<td bgcolor=orange>Şili</td>
<td bgcolor=orange>Eva Luna</td>
</tr>
</table>
</body>
</html>
Tabi sadece geri planı değil, çerçeve rengini de değiştirebiliriz. Bunun için bordercolor parametresi kullanılır. Eğer tablo çerçevesi 3d (üç boyutlu) olmasını istiyorsak, bordercolorlight ile çerçevenin aydınlık kısmının rengini, bordercolordark ile de çerçevenin karanlık kısmının rengini belirleyebiliriz. Bu konuda bir uygulama yapalım; çerçeve daha iyi görünsün diye çerçeve kalınlığını artırıyorum:
Kod: Tümünü seç
<html>
<head>
<title>Çerçeve Renklendirme</title>
</head>
<body>
<table border="4" cellspacing="0" cellpadding="1" width="90%" bordercolorlight="#aacccc" bordercolordark="#459999">
<tr>
<td width="200">Yazar</td>
<td width="20%">Ülke</td>
<td>Kitap</td>
</tr>
<tr>
<td>Mario Llosa Vargas</td>
<td>Peru</td>
<td>Julia Teyze</td>
</tr>
<tr>
<td>Isabelle Allende</td>
<td>Şili</td>
<td>Eva Luna</td>
</tr>
</table>
</body>
</html>
Volkan Derinbay'a tşkler.