İlk HTML Table Oluşturma

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ı:

3. Tablo Elementleri ve Görevleri

1. <table>: Tüm tabloyu kapsar.
2. <tr>: Tablo satırlarını tanımlar.
   • Örneğin, "Python", "JavaScript", ve "Java" her biri bir <tr> elementinde bulunur.
3. <td>: Veri hücrelerini tanımlar.
   • Örneğin, "Kolay" (Python'un öğrenme zorluğu) bir <td> elementidir.
4. <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!