# HTML ile Tablo Oluşturma
HTML'de tablo oluşturmak için `<table>`, `<tr>`, `<th>`, `<td>` gibi etiketler kullanılır. İşte temel bir HTML tablo yapısı:
## 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
## Ö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
Tablonun görünümünü CSS ile daha da özelleştirebilirsiniz.
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>
</tr>
<td>85</td>
<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
Tablonun görünümünü CSS ile daha da özelleştirebilirsiniz.