Yedinci Ders Tablolar

Tablolar, sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak amaçlarıyla kullanabileceğimiz HTML'nin en önemli yapıtaşlarındandır. Sayfada gözüksün ya da gözükmesin tabloları bir iskelet gibi kullanabilir, böylece şu ana kadar öğrendiklerinizle yapamayacağınız gerçek düzenlemeyi yapabilirsiniz. Elbette HTML dizayn konusunda bir masaüstü yayıncılık programının gösterdiği hassasiyeti göstermez, bir de browserların tablo etiketlerini yorumlamada gösterdiği farklılıklar da buna eklenirse, genel ziyaretçi kesimine hitab etmenin ne kadar zor olduğu anlaşılır. Fakat burada konumuz bunu tartışmak değil tablolar konusunu işlemek.

Bu örneklerde de görüldüğü gibi tablolar satır ve sütunlardan oluşur. Tabloya genel bir başlık atayabiliriz. Her sütun için de kendi başlığını oluşturmak mümkündür. Üstteki tablo başlığının altında veya tablonun sona erdiği satırdan sonraki satıra açıklama (thead/caption) koyabiliriz. Ayrıca tablo hücrelerini yanındaki veya altındaki hücrelerle birleştirebiliriz:

Bu kadar örnek yeterli, şimdi basit bir tablo yapmak için gerekli etiketleri öğrenelim. Öncelikle <table>...</table> etiketlerini yazıyoruz ve arasını doldurmaya başlıyoruz. <tr> etiketi ile satırları <td> etiketi ile de sütunları oluşturuyoruz.

Tabloda başlık ve gövde

Tablolar da HTML sayfasında olduğu gibi başlık (head) ve gövde (body) bölümlerine ayrılabilir. Tabloda başlığı <thead> gövdeyi <tbody> etiketleri arasına yazarız. <caption> etiketi ile ikinci bir açıklama vermek mümkündür.

Sütun başlıklarına gelince, her bir başlık <th> etiketi ile belirtilir ve bunlar <td> etiketinde olduğu gibi <tr>...</tr> arasına yazılır.

Tabloda satır ve sütunları belirten <tr> ve <td> etiketleri <tbody>...</tbody> arasına alınır.

Yukarıdaki örneklerden birisini değiştirerek bu anlattıklarımızı uygulayalım;

Tablo Başlığı (thead)

alt-yazı (caption)

1.Sütun

2.Sütun

3.Sütun

<table border="1">
<thead>Tablo Başlığı (thead)</thead>
<caption align="bottom">
alt-yazı (caption)
<caption>
<tr>
  <th>1.Sütun</th>
  <th>2.Sütun</th>
  <th>3.Sütun</th>
</tr>
<tbody>
<tr>
  <td>hücre1</td>
  <td>hücre2</td>
  <td>hücre3</td>
</tr>
<tr>
  <td>hücre4</td>
  <td>hücre5</td>
  <td>hücre6</td>
</tr>
<tr>
  <td>hücre7</td>
  <td>hücre8</td>
  <td>hücre9</td>
</tr>
</tbody>
</table>

Parametreler

border parametresi çerçevenin kalınlığını belirtir. border=0 çerçevenin görünmemesini sağlar.

hücre

<table border="0">
<tr>
<td>hücre</td>
</tr>
</table>

hücre

<table border="2">
<tr>
<td>hücre</td>
</tr>
</table>

hücre

<table border="4">
<tr>
<td>hücre</td>
</tr>
</table>

hücre

<table border="6">
<tr>
<td>hücre</td>
</tr>
</table>

cellpadding parametresi hücre içi marj değerini belirtir. cellpadding=0 hücre ile içinde bulunan unsurun (metin/grafik) bitişik olmasını sağlar.

hücre

<table border="1" cellpadding="0">
<tr>
<td>hücre</td>
</tr>
</table>

hücre

<table border="1" cellpadding="5">
<tr>
<td>hücre</td>
</tr>
</table>

hücre

<table border="1" cellpadding="10">
<tr>
<td>hücre</td>
</tr>
</table>

cellspacing parametresi hücreler arası marjı belirler.

hücre1

hücre2

<table border="1" cellspacing="1">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>

hücre1

hücre2

<table border="1" cellspacing="5">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>

hücre1

hücre2

<table border="1" cellspacing="10">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>

align parametresi tabloyu düşey hizalamada kullanılır, align=left sola, align=right sağa dayalı yapar, align=center ortalar

hücre1

hücre2

<table border="1" align="left">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>

hücre1

hücre2

<table border="1" align="center">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>

hücre1

hücre2

<table border="1" align="right">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>

width ve height parametreleri resimler konusunda gördüğümüz gibi tabloda en ve boy uzunluğunu belirtir. Tablonun değer verilmediğinde sahip olduğu normal ölçülerinden küçük değerler verilirse bu değerler dikkate alınmaz, bir başka deyişle tabloyu büyütebiliriz fakat küçültemeyiz.

hücre1

hücre2

<table border="1" width="150" height="200">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>

hücre1

hücre2

<table border="1" width="80" height="80">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>

hücre1

hücre2

<table border="1" width="5" height="5">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>

<td> etiketi için parametreler

bgcolor parametresi hücreyi renklendirmede kullanılır.

hücre1

hücre2

hücre3

hücre4

<table border="1" cellpadding="7">

<tr>
<td bgcolor="#ff0000">hücre1</td>
</tr>
<tr>
<td bgcolor="#00ff00">hücre2</td>
</tr>
<tr>
<td bgcolor="#0000ff">hücre3</td>
</tr>
<tr>
<td bgcolor="#ffff00">hücre4</td>
</tr>

</table>

background parametresi ile hücreye grafik-artalan yerleştirebiliriz.

hücre1

hücre2

hücre3

hücre4

<table border="1" cellpadding="9">

<tr>
<td background="resim1.jpg">hücre1</td>
</tr>
<tr>
<td background="resim2.jpg">hücre2</td>
</tr>
<tr>
<td background="resim3.jpg">hücre3</td>
</tr>
<tr>
<td background="resim4.jpg">hücre4</td>
</tr>

</table>

width ve height parametreleri ile hücrenin boyutlarını belirleyebiliriz. Yalnız height komutu ile tek sütunlu bir tabloda her hücrenin yüksekliğini değiştirebilirken, width komutu ile her hücreyi değiştiremeyiz.En büyük width değeri tüm sütun için geçerli olacaktır. Aynı şekilde tek satırlı tabloda width değerini her hücre için değiştirebilirken en büyük height değeri tüm satır için geçerli olacaktır.

hücre1

hücre2

hücre3

hücre4

<table border="1" cellpadding="7">

<tr><td width=120 height=20>hücre1</td></tr>
<tr><td width=120 height=40>hücre2</td></tr>
<tr><td width=120 height=60>hücre3</td></tr>
<tr><td width=120 height=80>hücre4</td></tr>

</table>

hücre1

hücre2

hücre3

hücre4

<table border="1" cellpadding="7">
  <tr>
     <td width=40 height=30>hücre1</td>
     <td width=70 height=30>hücre2</td>
     <td width=90 height=30>hücre3</td>
     <td width=120 height=30>hücre4</td>
  </tr>
</table>

align parametresi hücre içinde yatay hizalama yapar.

hücre1

hücre2

hücre3

<table border="1" cellpadding="7">

<tr><td width="100" align="left">hücre1</td></tr>
<tr><td width="100" align="center">hücre2</td></tr>
<tr><td width="100" align="right">hücre3</td></tr>

</table>

valign parametresi hücre içinde düşey hizalama yapar.

hücre1

hücre2

hücre3

<table border="1" cellpadding="7">

<tr>
<td height="80" valign="top">hücre1</td>
</tr>
<tr>
<td height="80" valign="middle">hücre2</td>
</tr>
<tr>
<td height="80" valign="bottom">hücre3</td>
</tr>

</table>

Hücreleri Birleştirme

Aynı satırdaki hücreleri birleştirmek için colspan, aynı sütundaki hücreleri birleştirmek için de rowspan parametresini kullanıyoruz. Birleştirilen hücreye ait <td>..</td> etiketini siliyoruz.

A	B	C	D
E	F	G	H
I	J	K	L

Yukarıdaki tabloda;

A ve B hücrelerini birleştirmek için A hücresine ait <td> etiketine colspan=2 parametresini ekliyoruz ve B hücresine ait <td>B</td> etiketini siliyoruz. E F ve G hücrelerini birleştirmek için E hücresine ait <td> etiketine colspan=3 parametresini ekliyoruz ve F ve G hücrelerine ait <td>F</td> , <td>G</td> etiketlerini siliyoruz.

A		C	D
E			H
I	J	K	L

Aynı şekilde E ve I hücrelerini birleştirmek için E hücresine ait <td> etiketine rowspan=2 parametresini ekliyoruz ve I hücresine ait <td>I</td> etiketini siliyoruz. C G ve K hücrelerini birleştirmek için C hücresine ait <td> etiketine rowspan=3 parametresini ekliyoruz ve G ve K hücrelerine ait <td>G</td> , <td>K</td> etiketlerini siliyoruz.

A	B	C	D
E	F		H
E	J		L