HTML Tablo Biçimi

Mesaj gönderen **admin** » 17 Ara 2009 , Prş 12:57 pm

Tablo Biçimi

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.

codeDivStart() <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>

Bu uygulamada neler yaptık? <table> komutuyla tablo için gereken kodları yazmaya başlamış olduk. HTML'de tablolar; daha önce dediğim gibi, satır satır işlenir. Biz de <tr>...</tr> kodlarıyla bu tabloyu satır satır işledik. İlk satıra üç tane hücre işledik, bunun için de <td>...</td> kodlarını kullandık. İlk satırda üç tane hücre olduğundan, üç defa <td>...</td> kodu yazdık. Yaptığımız işi özetlersek, üç satır için üç defa <tr>...</tr> kodunu kullandık. Her satırda da üçer tane hücre yapmak için, toplam dokuz defa <td>...</td> kullanmış olduk.

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:

codeDivStart() </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>

Tablomuzda sınır çizgileri hücrelerin dört yanını da kapatmaktadır. Ama böyle olması şart değil. frame (çerçeve) parametresine aşağıdaki değerleri vererer tablomuza başka biçimler verebiliriz:

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.

codeDivStart() <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>

Yaptığımız bu uygulamada tablonun genişliğini "90" değerine eşitledik. Böylece tablonun genişliği, pencerenin genişliğinin %90'ına eşilenmiş oldu. Pencerenin büyüklüğüyle oynarsanız, göreceksiniz ki bu oran değişmeyecektir. (Tabi pencereyi fazla küçültürseniz başka. Ben anlatmayım, siz görün.) Bu uygulamada tablonun genişliğini değiştirmekle kalmadık, sütunların genişliklerini de belirledik. Bunun için tablonun ilk satırındaki hücrelere width parametresi atadık. İlk hücrenin genişliği için 200 piksel, ikinci hücrenin genişliği için %20 değerlerini verdik. Son hücreye ise değer vermedik, zira tablonun genişliğini önceden belirlemiştik. Yani son sütunun genişliği, tablo genişliği - (1. sütun genişliği + 2. sütun genişliği) olarak belirlemiş olduk zaten.

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:
codeDivStart()
<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:

codeDivStart() <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>

Yukarıdaki uygulamada ne yaptık? İlk satırı yukarıya, ikinci satırı aşağıya, üçüncü satırı ise araya hizaladık. Sonra hücreleri teker teker sağa, sola veya ortaya yasladık. İleriki sayfalarda bu parametrelerin başka birçok kod için de geçerli olduğunu göreceğiz.

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:

codeDivStart() <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>

Tablo Sınır Çizgisi Formatı

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:

codeDivStart() <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>

Teknik Forum

HTML Tablo Biçimi

HTML Tablo Biçimi

Kimler çevrimiçi