<table>...</table>

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,

Başka bir örnek (farklara dikkat ediniz)  

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:

<table> etiketinden sonra ilk olarak <tr> etiketiyle ilk satırı oluşturuyoruz. Oluşturmak istediğimiz sütun kadar <td> etiketi yazıyoruz. <td>...</td> etiketleri arasına metin yada grafik (<img src=>) koyabiliriz.<td> etiketleri ile sütunları oluşturduktan sonra </tr> etiketi ile oluşturduğumuz satırı bitiriyoruz. İkinci, üçüncü... satırları oluşturmak için aynı yöntemi uyguluyoruz.  

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 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;

alt-yazı (caption)
<tableborder="1">
<thead>TabloBaşlığı(thead)</thead>
<captionalign="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

<table border=".." cellpading=".." cellspacing=".." align=".." width=".." height="..">
Border parametresi çerçevenin kalınlığını belirtir. border=0 çerçevenin görünmemesini sağlar.