İçerik · Table

Tablo

Veriyi satır ve sütun olarak düzenler.

CSS: kararlı
JavaScript: gerekmiyor
React: kararlı
Vue: kararlı

Örnekler

Temel Canlı örnek

Başvuru geçmişi
Tarih	İşlem	Tutar
12.03.2026	Başvuru alındı	0,00 ₺
18.03.2026	Harç ödendi	1.250,00 ₺

HTML kodunu göster

<div class="trds-tablo-kap">
  <table class="trds-tablo">
    <caption>Başvuru geçmişi</caption>
    <thead>
      <tr><th scope="col">Tarih</th><th scope="col">İşlem</th><th scope="col" class="trds-sayi">Tutar</th></tr>
    </thead>
    <tbody>
      <tr><td>12.03.2026</td><td>Başvuru alındı</td><td class="trds-sayi">0,00 ₺</td></tr>
      <tr><td>18.03.2026</td><td>Harç ödendi</td><td class="trds-sayi">1.250,00 ₺</td></tr>
    </tbody>
  </table>
</div>

Ne zaman kullanılır

İki boyutlu veriyi göstermek için kullanın.
Sayfa düzeni için kullanmayın.
Küçük ekranda tablo yatay kayar. Sayfanın kendisi yatay kaymaz.

Erişilebilirlik

Her tabloda <caption> bulunur.
Başlık hücreleri <th scope="col"> veya <th scope="row"> olur.
Sayı sütunları sağa yaslanır ve font-variant-numeric: tabular-nums alır.

Karşılanan WCAG 2.2 ölçütleri 1.3.1 1.4.10

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: UK, US, FR, IE, KR, JP, DK, DE, NO.