HTML ile kenarlıklı ve kenarlıksız tablolar yapabilirsiniz. Tablolar metinlerinizin ve resimlerinizin hizalı olmasını sağlar .

Tablolar

Tablolar <table> etiketi ile başlar. Tablolar <tr> etiketi ile satırlara bölünür ve her satır da <td> etiketi ile sütunlara bölünür. Bir tablo hücresi metinler, resimler, listeler, paragraflar, formlar, yatay çizgiler, tablolar vs. 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>

Önizleme aşağıdaki gibi olacaktır:
satır 1, hücre 1 satır 1, hücre 2
satır 2, hücre 1 satır 2, hücre 2

Tablolar ve Kenarlık (border) Parametresi

Eğer bir border parametresi belirtmezseniz ya da border parametresinin değerini 0(Sıfır) yaparsanız, tablonuz kenarlık olmadan görüntülenir. Bu bazen yararlı olabilir ama çoğu zaman kenarlıkları göstermek daha çok işinize yarayacaktır.

Kenarlıkları göstermek için aşağıdaki parametreyi kullanmalısınız:

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

Tablolarda Başlıklar

Başlıklar <th> etiketi ile belirtilir.

<table border="1">
<tr>
<th>Başlık</th>
<th>Başlık 2</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>

Önizleme
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

Bir Tabloda Boş Hücreler

Veri içermeyen hücreler bazı tarayıcıda gözükmezler.

<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></td>
</tr>
</table>

Önizleme
Satır 1, Hücre 1 Satır 1, Hücre 2
Satır 2, Hücre 1

Boş hücre etrafındaki iç kenarlıkların görünmediğine dikkat edin. (Mozilla Firefox bunu görüntüler).

Bundan kurtulmak için, ( ) özel karakterlerini boş hücre içine ekleyerek kenarlıkların görüntülenmesini sağlayabilirsiniz.

<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>> </td>
</tr>
</table>

Önizleme
Satır 1, Hücre 1 Satır 1, Hücre 2
Satır 2, Hücre 1  

Tablo Etiketleri

Etiketi Açıklama
<table> Tablo
<th> Tablo başlığı
<tr> Satır
<td> Hücre
<caption> Manşet
<colgroup> Hücre grupları
<col> Sütun genişliği
<thead> Tablo başı
<tbody> Tablo body özelliği
<tfoot> Tablonun en alt kısmı




Hiç yorum yok: