Tablo Etiketi
Tablo etiketi HTML'de tablolar oluşturmak için kullanılan bir yapısal etikettir. Tablo, sütunlar ve satırlardan oluşan bir düzenleme şeklidir ve HTML tabloları verileri organize etmek, düzenlemek ve sunmak için kullanılır. Tablo etiketi, veri tabloları, program çıktıları, takvimler, fiyat listeleri vb. gibi çeşitli veri yapılarını oluşturmak için kullanılır.
Kullanımı
Tablo etiketi, açılış etiketi <table> ve kapanış etiketi </table> şeklinde kullanılır. Tablo içeriği, sütunları ve satırları içeren başka etiketlerle birlikte oluşturulur.
Tablo Başlığı (Table Headings)
Tablo başlıkları, tablonun içeriğini açıklayan sütun başlıklarını temsil eder. Tablo başlıkları <th> etiketi ile oluşturulur ve tablonun ilk satırında yer alır. Her sütun başlığı <th> etiketi içine yazılır.
<table>
<tr>
<th>Sütun 1 Başlık</th>
<th>Sütun 2 Başlık</th>
<th>Sütun 3 Başlık</th>
</tr>
<!-- Tablo içeriği burada yer alacak -->
</table>Tablo Satırları (Table Rows)
Tablo satırları, tablodaki verileri temsil eder. Her bir veri satırı <tr> etiketi ile oluşturulur ve tablonun içine yerleştirilir. Satır içindeki her hücre <td> etiketi ile oluşturulur.
<table>
<tr>
<th>Sütun 1 Başlık</th>
<th>Sütun 2 Başlık</th>
<th>Sütun 3 Başlık</th>
</tr>
<tr>
<td>Satır 1, Hücre 1</td>
<td>Satır 1, Hücre 2</td>
<td>Satır 1, Hücre 3</td>
</tr>
<tr>
<td>Satır 2, Hücre 1</td>
<td>Satır 2, Hücre 2</td>
<td>Satır 2, Hücre 3</td>
</tr>
</table>Tablo Hücreleri (Table Cells)
Tablodaki her hücre <td> etiketi ile oluşturulur. Hücreler, tablonun içindeki verileri temsil eder. Her satırda aynı sayıda hücre olmalıdır.
Tablo Başlık Hücreleri (Table Header Cells)
Tablo başlık hücreleri, tablo başlıklarını temsil eder ve daha geniş bir görüntüleme stiliyle gösterilir. Tablo başlık hücreleri <th> etiketi ile oluşturulur. Bu etiket, tarayıcılara tablo başlıklarını daha belirgin hale getirmelerini belirtir.
Tablo Birleştirme
Tablo hücrelerini birleştirmek için rowspan ve colspan öznitelikleri kullanılabilir. rowspan, bir hücreyi birden fazla satıra genişletmek için kullanılırken, colspan bir hücreyi birden fazla sütuna genişletmek için kullanılır.
<td rowspan="2">Satır 1 ve 2</td>
<td colspan="2">Sütun 2 ve 3</td>Tablo Çizgeleri
Tablo etiketi, varsayılan olarak tablo çizgelerini oluşturmaz. Ancak, tablo çizgeleri eklemek için CSS ile stil tanımlamaları yapabilirsiniz.
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
}
</style>Yukarıdaki CSS stil tanımlamaları, tablonun çerçevesini ve hücrelerin arasındaki çizgileri belirgin hale getirir.
Tablolar, verileri organize etmek, düzenlemek ve sunmak için güçlü bir araçtır. HTML tablo etiketleri ile verileri sütunlar ve satırlar halinde görüntüleyebilir, başlık ve alt başlık ekleyebilir, hücreleri birleştirebilir ve tablo çizgeleri ekleyebilirsiniz. Tablolar, veri sunumu ve düzenlemesi gerektiren birçok senaryoda kullanışlıdır.
