Yakuza

Yakuza

WFN Üye
Konular
577
Mesajlar
577
Çözüm
0
Ticaret Puanı
0
Üyelik
24 Gün
Konum
Artvin
Web Sitesi
Var
Alanı
SEO Danışmanı
1/1
Konu sahibi
HTML’de tablo oluşturmak için <table> etiketiyle tabloyu başlatıp satırları <tr>, başlık hücrelerini <th> ve veri hücrelerini <td> ile tanımlayın. Tabloyu tarayıcıda görmek için kodu .html uzantılı bir dosyaya kaydedip açmanız yeterlidir. Aşağıdaki örnek, başlık satırı ve iki veri satırından oluşan çalışır bir tablodur.

HTML: 
<table>
  <tr>
    <th>Ürün</th>
    <th>Fiyat</th>
  </tr>
  <tr>
    <td>Klavye</td>
    <td>750 TL</td>
  </tr>
  <tr>
    <td>Fare</td>
    <td>450 TL</td>
  </tr>
</table>

Bu kodu örneğin tablo.html adıyla kaydedip tarayıcıda açtığınızda iki sütunlu bir tablo görürsünüz. <th> hücreleri sütun başlıklarını, <td> hücreleri ise tablodaki normal verileri oluşturur. Her <tr> etiketi bir satırdır; satır içindeki hücre sayısı diğer satırlarla uyumlu olmalıdır.

Tablonun temel HTML etiketleri​


Aşağıdaki etiketler, basit bir HTML tablosunun iskeletini oluşturur.
EtiketGörevi
<table>Tablonun tamamını kapsar.
<tr>Bir tablo satırı oluşturur.
<th>Başlık hücresi oluşturur.
<td>Veri hücresi oluşturur.
<caption>Tablonun açıklayıcı başlığını belirtir.
Tablonun yalnızca veriyi düzenli göstermesi gerekiyorsa <table>, <tr>, <th> ve <td> etiketleri yeterlidir. <caption> ise tablonun ne anlattığını kullanıcıya önceden açıklamak için kullanılır.

Başlık ve açıklama eklenmiş tablo​


Gerçek bir sayfada tabloyu daha anlaşılır yapmak için başlık hücrelerini <thead>, veri satırlarını <tbody> içinde gruplayabilirsiniz. Bu etiketler tablonun görünümünü tek başına değiştirmez; ancak belgenin yapısını daha anlaşılır hâle getirir. <caption> tablonun üst açıklamasını verir.

HTML: 
<table>
  <caption>Ürün fiyatları</caption>
  <thead>
    <tr>
      <th scope="col">Ürün</th>
      <th scope="col">Stok</th>
      <th scope="col">Fiyat</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Klavye</td>
      <td>12</td>
      <td>750 TL</td>
    </tr>
    <tr>
      <td>Fare</td>
      <td>25</td>
      <td>450 TL</td>
    </tr>
  </tbody>
</table>

Buradaki scope="col" özniteliği, ilgili başlığın bir sütunu açıkladığını belirtir. Bu bilgi özellikle yardımcı teknolojilerin tablo ilişkilerini daha doğru yorumlamasına yardımcı olur. Tablonun görünür çizgilere sahip olması HTML’den değil, CSS’den kaynaklanır.

Tabloya kenarlık ve düzen verme​


HTML tabloyu oluşturur; kenarlık, boşluk ve hizalama gibi görsel özellikleri CSS ile vermek gerekir. Aşağıdaki örnekte HTML ve CSS birlikte kullanılmıştır.

HTML: 
<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }

  th,
  td {
    border: 1px solid #999;
    padding: 8px;
    text-align: left;
  }

  th {
    background-color: #f2f2f2;
  }
</style>

<table>
  <tr>
    <th>Ad</th>
    <th>E-posta</th>
  </tr>
  <tr>
    <td>Ayşe</td>
    <td>[email protected]</td>
  </tr>
</table>

Bu örnekte border-collapse: collapse hücre kenarlıklarını birleştirir, padding hücre içindeki boşluğu artırır ve width: 100% tablonun bulunduğu alanın genişliğini kullanmasını sağlar. CSS eklenmezse tablo yine oluşur; yalnızca tarayıcının varsayılan görünümüyle gösterilir.

Hücreleri birleştirme​


Bir hücrenin birden fazla sütuna veya satıra yayılması gerektiğinde colspan ve rowspan kullanılır. colspan="2" hücrenin iki sütun kaplamasını, rowspan="2" ise iki satıra yayılmasını sağlar.

HTML: 
<table>
  <tr>
    <th colspan="2">İletişim bilgileri</th>
  </tr>
  <tr>
    <td>Telefon</td>
    <td>555 123 45 67</td>
  </tr>
</table>

Bu örnekte ilk başlık hücresi iki sütunun tamamını kaplar. Birleştirme kullanırken her satırın toplam sütun genişliğini hesaba katın; aksi hâlde hücreler beklenmeyen yerlere kayabilir.

HTML tablosu ne zaman kullanılmalı?​


Tablolar; fiyat listeleri, ürün özellikleri, ders programları, raporlar ve satır-sütun ilişkisi taşıyan diğer veriler için uygundur. Sayfanın genel yerleşimini kurmak, içerik bloklarını yan yana dizmek veya mobil menü yapmak için tablo kullanmayın. Bu tür düzenler CSS ile, özellikle flexbox veya grid gibi yöntemlerle oluşturulmalıdır.

Tabloyu oluşturduktan sonra tarayıcıda kontrol ederken başlıkların doğru sütunla eşleştiğine, her satırdaki hücre sayısının tutarlı olduğuna ve uzun içeriklerde görünümün bozulmadığına bakın. Tablo veriyi açıkça göstermiyorsa önce HTML yapısını, görünüm sorunu varsa CSS kurallarını inceleyin.
 

Sende şimdi bize katılmak ister misin?

Kayıt ol

Bize katılım kolay ve ücretsizdir!

Üye ol
Foruma git ?

Bu konuyu görüntüleyen kullanıcılar

Bu konuyu şu anda görüntüleyen üye bulunmuyor.
Robotlar:
  • Anthropic
Toplam: 1 (Üye: 0, misafir: 0, robot: 1)