Tablo table

bilinen diğer adları table · veri tablosu · data grid (etkileşimli hâli)

Böyle diyorsan: "satır sütun liste" · "excel gibi görünen liste" → bunun adı tablo.

Satır-sütun düzeninde veri görünümü; sıralama ve satır işlemleri eklenebilir.

Tablo, çok sayıda kaydı aynı sütunlarda karşılaştırmak içindir; gücü hizadan gelir — aynı bilgi hep aynı yerde durduğu için göz kolayca kıyaslar. Bu yüzden tabloyu yerleşim aracı olarak kullanmak (görünüşü tutsun diye) hem anlamı bozar hem ekran okuyucuyu yanıltır. En kritik teknik ayrıntı başlık hücreleridir: <th> ve scope olmadan ekran okuyucu bir hücreyi okurken hangi sütuna ait olduğunu söyleyemez ve kullanıcı sayılar denizinde kaybolur. Mobil ise tablonun doğal düşmanıdır: dar ekranda sütunlar sığmaz ve en yaygın iki çözüm vardır — yatay kaydırma ya da her satırı bir karta dönüştürmek; ikisi de bilinçli bir karardır, kendiliğinden olmaz.

Kapsam: Bu madde veriyi karşılaştıran tabloyu kapsar. Tek bir kaydı bütün olarak tanıtan yüzey Kart, satırların sayfalara bölünmesi Sayfalama maddesindedir. Sıralama, filtre ve satır seçimi eklendiğinde parça bir 'veri ızgarası'na dönüşür ve klavye beklentileri artar.

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı

Sipariş ↕	Müşteri	Tutar	Durum
#1042	Ayşe Y.	₺450	Ödendi	⋯
#1041	Mehmet K.	₺120	Bekliyor	⋯
#1040	Zeynep T.	₺980	Ödendi	⋯

Aşama aşama gezmek için okları ya da numaraları kullan.

YAPIM PROMPTU — AJANINA YAPIŞTIR

Sipariş tablosu kur: th scope=col başlıklar, tutar/tarih kolonları TİPİNE göre sıralanabilir (sayı sayı olarak — '2' < '10'), aktif sıralama oku + aria-sort; durum kolonunda badge; satır sonunda ⋯ menüsü (satır tıklamasından bağımsız); mobilde tablo yatay kaydırmalı konteynere alınsın ya da kart görünümüne düşsün; 200+ satırda sayfalama/sanallaştırma.

DEBUG PROMPTU — HUYSUZLANIRSA

Yapıştır, sonuna belirtiyi ekle — ajana klasik hata kalıplarını önden verir.

Tablom huysuz; klasikleri sırayla ele: (1) sıralama string karşılaştırması — ₺100, ₺20'den önce geliyor; tarih de alfabetik; (2) mobilde tablo sayfayı yanlara patlatıyor (overflow konteyneri yok); (3) ⋯ menüsüne tıklayınca satır-detayı da açılıyor (olay çakışması); (4) 3000 satır tek seferde DOM'a basılmış, sayfa kilitleniyor; (5) th'lerde scope yok, okuyucu hücre-başlık ilişkisini kuramıyor; (6) hangi kolona göre sıralı olduğu görünmüyor. Belirti şu:

ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)

1Başlık satırıth scope=col + aria-sort
Kolon adları; sıralanabilirse yön oku ve aria-sort taşır.
2Veri satırlarıtr/td
Kayıtlar; zebra çizgileme uzun tablolarda göz kaymasını azaltır.
3Durum hücresibadge/chip
Metin yerine renkli durum hapı ('Ödendi') — taranabilirliği artırır.
4İşlem menüsü⋯ dropdown
Satır eylemleri tek menüde; satır-tıklama ile ⋯-tıklama ÇAKIŞMAMALI (stopPropagation).

DURUMLAR — HANGİ HÂLDE NE OLUR

ANormal<th scope="col">
Başlıklar işaretli. scope olmadan ekran okuyucu hücreyi sütunuyla ilişkilendiremez — tablonun bütün anlamı buna bağlıdır.
BSıralanmışaria-sort
Bir sütuna göre dizili. Yön (artan/azalan) hem görsel okla hem aria-sort ile bildirilmeli; ok tek başına ekran okuyucuya bir şey söylemez.
CBoşboş durum satırı
Filtre sonuç vermedi. Tabloyu başlıklarıyla boş bırakma; ne olduğunu ve filtreyi nasıl gevşeteceğini söyle.
DYükleniyoriskelet satırlar
Veri yolda. Satır yüksekliği gerçek satırla eşleşsin, yoksa veri gelince tablo baştan dizilir ve kullanıcı yanlış satıra tıklar.
EMobilkaydırma / karta dönüşme
Sütunlar sığmıyor. Yatay kaydırma alanı klavyeyle de gezilebilmeli; kart dönüşümünde ise her değerin başlığı satırın yanında tekrar yazılmalı.

KODDAKİ ADLARI

HTML	th scope=col + aria-sort	erişilebilir sıralama
CSS	overflow-x:auto konteyner	mobil taşma çözümü
UX	tip-farkında sıralama	sayı≠string

ERİŞİLEBİLİRLİK & SIK HATA

Başlık hücrelerini <th> ve scope ile işaretle (WCAG 1.3.1). Görsel olarak kalın yazılmış bir <td>, ekran okuyucu için başlık değildir.
Tabloya bir açıklama ver (<caption>): 'Sipariş listesi, 240 kayıt' gibi. Ekran okuyucu kullanıcısı tabloya girmeden ne olduğunu bilir.
Sıralama durumunu aria-sort ile bildir; yalnız ok ikonu değiştirmek görsel bir ipucudur.
Yatay kaydırma kabına klavye erişimi ver (tabindex="0" ve ad); fareyle kaydırılabilen ama klavyeyle gezilemeyen tablo, verinin bir kısmını erişilemez kılar.
Tabloyu yerleşim için kullanma. Görünüş amacıyla kurulan tablo, ekran okuyucuda 'satır 3, sütun 2' gibi anlamsız bir yapı olarak duyurulur.

SIK KARIŞTIRILANLAR

Karttan farkı. Tablo KARŞILAŞTIRIR, kart TANITIR. Karar sorusu: kullanıcı bu kayıtları birbiriyle kıyaslayacak mı? Kıyaslayacaksa tablo, çünkü aynı bilgi hep aynı hizadadır. Tek tek inceleyecekse kart, çünkü her kayıt kendi görselini ve düzenini taşıyabilir. Mobilde tablonun karta dönüşmesi de bu yüzden doğaldır: dar ekranda kıyaslama zaten mümkün değildir.

Kart sayfasına git →

Sayfalamayla ilişkisi. Bunlar rakip değil tamamlayıcıdır: tablo veriyi gösterir, sayfalama onu bölerek gezilebilir kılar. Ayrım şurada önemlidir — tablo içi sıralama ve filtre SUNUCU tarafında yapılıyorsa sayfalama ile birlikte çalışmalıdır; yalnız görünen sayfayı sıralamak, kullanıcıya bütün veriyi sıraladığını sandıran sessiz bir hatadır.

Sayfalama sayfasına git →

KAYNAKLAR

standartMDN — <table> elementi ↗
Yapı, caption ve erişilebilirlik notları.
standartMDN — <th> ve scope ↗
Başlık hücresinin hangi hücrelere ait olduğunu bildirmenin yolu.
standartW3C — WCAG 2.2, Info and Relationships (1.3.1) ↗
Görsel tablo yapısının koda da yazılması şartı.
standartW3C — WCAG 2.2, Reflow (1.4.10) ↗
Dar ekranda içeriğin iki yönlü kaydırma gerektirmemesi kuralı — tablonun mobil sorunu.

İLGİLİ PARÇALAR

Kart card Sayfalama pagination İskelet yükleme skeleton Boş durum empty state

AYNI AİLEDE · İÇERIK VE YERLEŞIM