0Pricing
HTML Academy · Ders

table, tr, td ve th

Satırlar, veri hücreleri ve başlık hücreleriyle temel tablolar oluşturmayı öğrenin.

table, tr, td ve th, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

HTML Tabloları

Tablolar, verileri satırlar ve sütunlar hâlinde görüntüler. Bunları tablo biçimindeki veriler için kullanın — sayfa düzeni için değil.

<table>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>95</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>87</td>
  </tr>
</table>

table, tr ve td Öğeleri

Temel tablo öğeleri:

  • <table> — tablo kapsayıcısı
  • <tr> — tablo satırı
  • <td> — tablo veri hücresi
  • <th> — tablo başlık hücresi (varsayılan olarak kalın ve ortalanmış)

th ve td Karşılaştırması

Başlık hücreleri için <th> kullanın — bunların anlamsal bir anlamı vardır:

<table>
  <tr>
    <th>Language</th>    <!-- header: bold + centered by default -->
    <th>Year Created</th>
    <th>Type</th>
  </tr>
  <tr>
    <td>HTML</td>         <!-- data cell -->
    <td>1991</td>
    <td>Markup</td>
  </tr>
</table>

Temel Tablo Yapısı

En küçük ancak eksiksiz bir tablo:

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Stock</th>
  </tr>
  <tr>
    <td>Widget Pro</td>
    <td>$49.99</td>
    <td>In Stock</td>
  </tr>
  <tr>
    <td>Widget Lite</td>
    <td>$19.99</td>
    <td>Out of Stock</td>
  </tr>
</table>

CSS ile Tablo Kenarlıkları

Tarayıcılar tabloları varsayılan olarak kenarlık olmadan görüntüler. Kenarlıkları CSS ile ekleyin:

table {
  border-collapse: collapse;  /* merge double borders into one */
  width: 100%;
}

th, td {
  border: 1px solid #ddd;
  padding: 0.75rem 1rem;
  text-align: left;
}

th {
  background-color: #f5f5f5;
  font-weight: 600;
}

Tablolar Sayfa Düzeni İçin Değildir

1990'larda tablolar sayfa düzeni için kullanılıyordu. Bu yaklaşım güncelliğini yitirmiştir ve zararlıdır:

  • Ekran okuyucular tabloları veri olarak yorumlar — düzen tabloları kullanıcıların kafasını karıştırır
  • Tablalar küçük ekranlarda esnek değildir
  • CSS Grid ve Flexbox, tüm düzen gereksinimlerinin yerini almıştır
  • <table> öğesini yalnızca gerçek tablo biçimindeki veriler için kullanın

Duyarlı Tablolar

Tablolar küçük ekranlarda taşar. Yatay kaydırma için tabloları bir kapsayıcıya alın:

<div class="table-wrapper" style="overflow-x: auto;">
  <table>
    <!-- table content -->
  </table>
</div>

/* Or use CSS: */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

Boş Hücreler

Boş hücreleri bilinçli biçimde ele alın:

<tr>
  <td>Alice</td>
  <td>95</td>
  <td></td>          <!-- Empty: renders blank -->
</tr>

/* CSS to style empty cells */
td:empty::before {
  content: '—';
  color: #999;
}

thead ve tbody Önizlemesi

Tablolar, başlık satırlarını veri satırlarından ayırmak için <thead> ve <tbody> kullanmalıdır — bu konu bir sonraki derste ele alınacaktır:

<table>
  <thead>
    <tr><th>Name</th><th>Score</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>95</td></tr>
  </tbody>
</table>

Sütunları Biçimlendirmek için col ve colgroup

Tam sütunlara stiller uygulamak için <colgroup> ve <col> kullanın:

<table>
  <colgroup>
    <col style="width: 200px; background: #f9f9f9;">
    <col style="width: 100px;">
    <col style="width: 100px;">
  </colgroup>
  <tr>
    <th>Name</th>
    <th>Score</th>
    <th>Grade</th>
  </tr>
</table>

CSS ile Zebra Şeritleri

Okunabilirlik için satır renklerini dönüşümlü olarak değiştirin:

tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

tbody tr:hover {
  background-color: #e3f2fd;
}

/* nth-child(even) for even rows instead */

Hızlı Kontrol

Bir tabloda td ile th arasındaki fark nedir?

Özet: table tr td th

Tablo temelleri:

  • <table> — tablo kapsayıcısı
  • <tr> — tablo satırı
  • <td> — veri hücresi
  • <th> — başlık hücresi (anlamsal, varsayılan olarak kalın)
  • Düzenli kenarlıklar için border-collapse: collapse kullanın
  • Tablolar yalnızca veri içindir — sayfa düzeni için değildir

Sıkça Sorulan Sorular

“table, tr, td ve th” dersi ücretsiz mi?

Evet — “table, tr, td ve th” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“table, tr, td ve th” dersinde ne öğreneceğim?

Satırlar, veri hücreleri ve başlık hücreleriyle temel tablolar oluşturmayı öğrenin. HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“table, tr, td ve th” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. table, tr, td ve th
  2. thead, tbody ve tfoot Yapısı
  3. Birleştirme için colspan ve rowspan
  4. Tablo Erişilebilirliği: scope, summary ve caption
← HTML Academy Sayfasına Dön