HTML Tabloları

HTML ile tablo oluşturabilirsiniz.

Örnek

Tablo
Bu örnek, HTML belgesinde nasıl tablo oluşturulacağını gösterir.
Tablo kenarları
Bu örnek, çeşitli türdeki tablo kenarlıklarını gösterir.

(Daha fazla örnek, bu sayfanın altında bulunabilir)

Tablo

Tablo, <table> etiketi ile tanımlanır. Her tablo, <tr> etiketi ile tanımlanan birkaç satırdan oluşur, her satır <td> etiketi ile tanımlanan birkaç hücreye ayrılır. Harf td, tablo verisini (table data) ifade eder, yani veri hücrelerinin içeriği. Veri hücreleri metin, resim, liste, paragraf, form, yatay çizgi, tablo vb. içerebilir.

<table border="1">
<tr>
<td>satır 1, hücre 1</td>
<td>satır 1, hücre 2</td>
</tr>
<tr>
<td>satır 2, hücre 1</td>
<td>satır 2, hücre 2</td>
</tr>
</table>

Tarayıcıda aşağıdaki gibi görüntülenir:

satır 1, hücre 1 satır 1, hücre 2
satır 2, hücre 1 satır 2, hücre 2

Tablo ve kenarlık özelliği

Kenarlık özelliği tanımlanmadığında, tablo kenarlığını göstermez. Bazen bu faydalı olabilir, ancak çoğu zaman kenarlığı göstermek isteriz.

Kenarlık özelliğini kullanarak kenarlıklı bir tablo gösterin:

<table border="1">
<tr>
<td>1. Satır, 1. Hücre</td>
<td>1. Satır, 2. Hücre</td>
</tr>
</table>

Tablo başlıkları

Tablo başlıkları, <th> etiketi ile tanımlanır.

Çoğu tarayıcı, başlıkları kalın ve ortalanmış metin olarak görüntüler:

<table border="1">
<tr>
<th>Başlık</th>
<th>Başka Başlık</th>
</tr>
<tr>
<td>satır 1, hücre 1</td>
<td>satır 1, hücre 2</td>
</tr>
<tr>
<td>satır 2, hücre 1</td>
<td>satır 2, hücre 2</td>
</tr>
</table>

Tarayıcıda aşağıdaki gibi görüntülenir:

Başlık Başka Başlık
satır 1, hücre 1 satır 1, hücre 2
satır 2, hücre 1 satır 2, hücre 2

Tablodaki boş hücreler

Bazı tarayıcılar, içeriği olmayan tablo hücrelerinin görüntülenmesini iyi yapmaz. Bir hücre boşsa (içeriği yoksa), tarayıcı bu hücrenin kenarını gösterebilir.

<table border="1">
<tr>
<td>satır 1, hücre 1</td>
<td>satır 1, hücre 2</td>
</tr>
<tr>
<td></td>
<td>satır 2, hücre 2</td>
</tr>
</table>

Tarayıcı bu şekilde görüntüleyebilir:

Tablodaki boş hücreler

Dikkat:Bu boş hücrenin kenarı gösterilmiyor. Bu durumu önlemek için, boş hücreye bir boşluk yer tutucusu ekleyerek kenarı gösterebilirsiniz.

<table border="1">
<tr>
<td>satır 1, hücre 1</td>
<td>satır 1, hücre 2</td>
</tr>
<tr>
<td> </td>
<td>satır 2, hücre 2</td>
</tr>
</table>

Tarayıcıda aşağıdaki gibi görüntülenir:

satır 1, hücre 1 satır 1, hücre 2
　 satır 2, hücre 2

Daha fazla örnek

Kenarlık olmayan tablo
Kenarsız bir tablo gösterilir.
Tablo içindeki başlıklar(Heading)
Tablo başlığını nasıl göstereceğinizi gösterir.
Boş hücre
İçeriği olmayan hücreleri nasıl işleyeceğinizi gösterir.
Başlık içeren tablo
Başlık (caption) içeren bir tablo gösterilir.
Satır veya sütun geçen tablo hücreleri
Satır veya sütun geçen tablo hücrelerini nasıl tanımlayacağınızı gösterir.
Tablo içindeki etiketler
Farklı elementler içinde elementleri nasıl göstereceğinizi gösterir.
Hücre kenar boşluğu(Cell padding)
Hücre içeriği ile kenar arasındaki boşluğu oluşturmak için Cell padding kullanımı
Hücre arası mesafe(Cell spacing)
Hücre arası mesafeyi artırmak için Cell spacing kullanımı
Tabloya arka plan renk veya arka plan görseli eklemek
Tabloya arka plan eklemek nasıl yapılır
Tablo hücresine arka plan renk veya arka plan görseli eklemek
Bir veya daha fazla tablo hücresine arka plan eklemek nasıl yapılır.
Tablo hücresinde içerik sıralama
Bu örnek, hücre içeriklerini nasıl sıralayarak güzel bir tablo oluşturacağınızı gösterir.
Çerçeve(frame) özelliği
Bu örnek, tabloya etrafını kontrol etmek için "frame" özelliğini nasıl kullanacağınızı gösterir.

Tablo etiketi

Tablo Açıklama
<table> Tabloyu tanımlar.
<caption> Tablo başlığını tanımlar.
<th> Tablonun başlığını tanımlar.
<tr> Tablonun satırını tanımlar.
<td> Tablo hücresini tanımlar.
<thead> Tablonun başlığını tanımlar.
<tbody> Tablonun ana kısmını tanımlar.
<tfoot> Tablonun alt kısmını tanımlar.
<col> Tablo sütunları için kullanılan özellikleri tanımlar.
<colgroup> Tablo sütun gruplarını tanımlar.