Forum Altay
Yönetici
HTML'de tablo oluşturmak için <table>, <tr>, <th>, <td> gibi etiketler kullanılır. İşte temel bir HTML tablo yapısı:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>HTML Tablo Örneği</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>Basit HTML Tablosu</h2>
<table>
<tr>
<th>Başlık 1</th>
<th>Başlık 2</th>
<th>Başlık 3</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>
</body>
</html>Tablo Etiketleri Açıklaması
- <table>: Tablonun başlangıç ve bitişini belirtir
- <tr>: Table row - Tablo satırını tanımlar
- <th>: Table header - Tablo başlık hücresi (kalın ve ortalanmış)
- <td>: Table data - Normal tablo hücresi
Gelişmiş Tablo Özellikleri
HTML:
<table>
<caption>Öğrenci Listesi</caption>
<thead>
<tr>
<th>No</th>
<th>Ad</th>
<th>Soyad</th>
<th>Not</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ahmet</td>
<td>Yılmaz</td>
<td>85</td>
</tr>
<tr>
<td>2</td>
<td>Ayşe</td>
<td>Kaya</td>
<td>92</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Ortalama</td>
<td>88.5</td>
</tr>
</tfoot>
</table>Önemli Özellikler
- colspan: Hücrenin kaç sütun genişliğinde olacağını belirtir
- rowspan: Hücrenin kaç satır yüksekliğinde olacağını belirtir
- <caption>: Tabloya başlık ekler
- <thead>, <tbody>, <tfoot>: Tabloyu semantik olarak bölümlere ayırır