rParametreler

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

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.

Ýþte tablolar,

Sonbahar	Kýþ	Ýlkbahar	Yaz
Eylül	Aralýk	Mart	Haziran
Ekim	Ocak	Nisan	Temmuz
Kasým	Þubat	Mayýs	Aðustos

Tabloyu renklendirelim,

Sonbahar	Kýþ	Ýlkbahar	Yaz
Eylül	Aralýk	Mart	Haziran
Ekim	Ocak	Nisan	Temmuz
Kasým	Þubat	Mayýs	Aðustos

Baþka bir örnek (farklara dikkat ediniz)

		ÖLÇÜLER
		Boy	Kilo
1.	Zafer	1.77	80
2.	Mustafa	1.82	75
3.	Osman	1.75	83

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:

Tablo Baþlýðý (thead) Sütun Baþlýðý #1	Sütun Baþlýðý #2	Sütun Baþlýðý #3	Sütun Baþlýðý #4
hücre	hücre	hücre	hücre
hücre	hücre	hücre	hücre
hücre		hücre	hücre
Tablonun alt yazýsý(caption)

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.

hücre

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

hücre1

hücre2

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

hücre1

hücre2

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

hücre1	hücre2
hücre3	hücre4

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

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>

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.

align parametresi tabloyu düþey hizalamada kullanýlýr, align=left sola, align=right saða dayalý yapar, align=center ortalar

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.

<td> etiketi için parametreler

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ü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 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.

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.