HTML tabloları, web sayfalarında düzenli ve anlamlı veri sunmak için kullanılan temel araçlardan biridir. Tablo oluşturma süreci, her ne kadar başlangıçta biraz karmaşık görünse de, doğru adımlarla oldukça basittir. Bu yazıda, yazılımla ilgili bir “En Popüler Programlama Dilleri” tablosu oluşturarak temel HTML tablo elementlerini öğreneceğiz.
1. Tablonun Temel Yapısı
HTML tablosu, <table> etiketi ile başlar. Ancak, tek başına <table> hiçbir şey ifade etmez; içeriğine veri eklemediğimiz sürece ekranda görünmez. Verilerimizi hücrelere yerleştirmek için birkaç temel elemente ihtiyacımız var:
<tr> (table row) Tablodaki satırları tanımlar. Bir tablo birden fazla satırdan oluşur.<td> (table data): Tablodaki veri hücrelerini temsil eder. Her hücre bir veri içerir.<th>: (table header): Tablo başlık hücrelerini tanımlar ve genelde satır veya sütun başlıkları olarak kullanılır.
2. İlk Tabloyu Oluşturma
Şimdi yazılımla ilgili bir tablo oluşturalım. Bu tabloda programlama dillerinin isimleri, kullanım alanları ve öğrenme zorlukları yer alacak.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>En Popüler Programlama Dilleri</title>
</head>
<body>
<h1>En Popüler Programlama Dilleri</h1>
<table border="1">
<!-- Tablo Başlıkları -->
<tr>
<th>Programlama Dili</th>
<th>Kullanım Alanı</th>
<th>Öğrenme Zorluğu</th>
</tr>
<!-- Birinci Satır -->
<tr>
<td>Python</td>
<td>Veri Bilimi, Web Geliştirme</td>
<td>Kolay</td>
</tr>
<!-- İkinci Satır -->
<tr>
<td>JavaScript</td>
<td>Web Geliştirme, Mobil Uygulama</td>
<td>Orta</td>
</tr>
<!-- Üçüncü Satır -->
<tr>
<td>Java</td>
<td>Kurumsal Uygulamalar, Android</td>
<td>Zor</td>
</tr>
<!-- Dördüncü Satır -->
<tr>
<td>C++</td>
<td>Oyun Geliştirme, Sistem Programlama</td>
<td>Zor</td>
</tr>
</table>
</body>
</html>
Çıktı:
| Programlama Dili | Kullanım Alanı | Öğrenme Zorluğu |
|---|
| Python | Veri Bilimi, Web Geliştirme | Kolay |
| JavaScript | Web Geliştirme, Mobil Uygulama | Orta |
| Java | Kurumsal Uygulamalar, Android | Zor |
| C++ | Oyun Geliştirme, Sistem Programlama | Zor |
3. Tablo Elementleri ve Görevleri
<table>: Tüm tabloyu kapsar.<tr>: Tablo satırlarını tanımlar.
- Örneğin, “Python”, “JavaScript”, ve “Java” her biri bir
<tr> elementinde bulunur.
<td>: Veri hücrelerini tanımlar.
- Örneğin, “Kolay” (Python’un öğrenme zorluğu) bir
<td> elementidir.
<th>: Tablo başlıklarını tanımlar.
- Örneğin, “Programlama Dili” ve “Kullanım Alanı” başlıkları
<th> elementleridir.
4. Basit Kenarlık Ekleme
Tabloyu netleştirmek için border özelliğini kullanabilirsiniz. Bu, tablonun kenarlarını belirginleştirir. Örnekte kullandığımız:
<table border="1">
5. Tablo Kullanımı
Bu tabloyu yazılım eğitimlerinde veya programlama dillerini tanıtmak için kullanabilirsiniz. Tabloya yeni diller eklemek için aşağıdaki gibi yeni bir satır oluşturabilirsiniz:
<tr>
<td>Ruby</td>
<td>Web Geliştirme</td>
<td>Orta</td>
</tr>
Sonuç
Tablolar, özellikle düzenli veri sunumu için vazgeçilmezdir. Ancak tabloları yalnızca doğru amaçlar için kullanmalıyız. Örneğin, 90′larda web düzenleri oluşturmak için kullanılan tablolar artık çağ dışı bir yöntemdir. Şimdi pratik yaparak tabloların temel yapısını ve kullanımını öğrenebilir, bir sonraki adımda daha karmaşık tablolar oluşturmayı deneyebilirsiniz!