Table

Ne zaman kullanılır

Table, kısa ve salt okunur bir veri kümesini satırlar ve sütunlar halinde gösterir: bir ayrıntı sayfasındaki kayıtlar, bir kıyaslama, bir özet. Sayfa yüklendiğinde tüm veri zaten ekrandadır ve kullanıcı yalnızca okur.

Ne zaman kullanılmaz

• Sıralama, süzme, sayfalama ya da seçim gerekiyorsa: DataTable kullanın. DataTable, Table ile aynı parçaları kullanır; aradaki fark davranıştır, görünüm değildir.
• Anahtar-değer çiftleri için: DescriptionList kullanın; iki sütunlu bir tablo yerine anlamsal bir tanım listesi verir.
• Tekrarlanan, tek sütunlu satırlar için: ListItem kullanın.
• Yalnızca yerleşim için: Izgara ve Stack kullanın; tablo veri içindir, yerleşim için değil.

Table ile DataTable

	Table	DataTable
Veri	Küçük, salt okunur, sayfada hazır	Büyük, sunucudan gelen ya da değişen
Etkileşim	Yok; yalnızca kaydırma	Sıralama, süzme, sayfalama, seçim
Durum	Yok	Satır seçimi, sütun düzeni
Parçalar	Table.*	Aynı Table.* parçaları

Anatomi

1. Kaydırma bölgesi (kök): tabloyu saran, adlandırılmış ve odaklanabilir div.
2. Başlık (caption): tabloyu adlandırır; görünür ya da gizli.
3. Üst bilgi (Table.Header): sütun başlıklarını (Table.HeaderCell) içeren satır.
4. Gövde (Table.Body): veri satırları (Table.Row), satır başlığı (Table.RowHeader) ve hücreler (Table.Cell).
5. Alt bilgi (Table.Footer): toplam gibi özet satırları.

Davranış

• Table durağandır: satırlar tıklanmaz, tablo sıralanmaz. Etkileşim gerekiyorsa DataTable kullanın.
• Tablo kapsayıcısından genişse ya da yüksekse kaydırma bölgesi kayar. Bölge adlandırılmıştır ve Tab ile odak alır.
• stickyHeader üst bilgi hücrelerini kapsayıcının üstünde tutar; kapsayıcıya bir yükseklik vermeniz gerekir.
• hoverable yalnızca renk değiştirir; satır asla yükselmez.
• selected satır yalnızca görsel olarak seçilidir; aria-selected düz tabloda kullanılmaz.
• Uzun metin truncate ile tek satırda kesilir; sütunun bir genişliği olmalıdır.

Yönergeler

Her tabloya bir başlık verin

caption zorunludur. Tabloyu ekran okuyucuya adlandırır ve kaydırma bölgesinin adı olur.

Öğe listesi

Ad	Durum
Birinci öğe	Etkin

YapınBaşlık var; gerekirse görsel olarak gizlenir.

Başlıksız tablo bu bileşenle kurulamaz.

YapmayınTablonun görünür bir başlığı ve adı yok; yerleşim tablosu gibi görünüyor.

Sayıları sağa yaslayın

Sayısal sütunlarda numeric kullanın: rakamlar alt alta gelir ve karşılaştırılır.

Öğe listesi

Ad	Adet
Birinci öğe	1.240
İkinci öğe	86

YapınSayılar satır sonuna yaslı, tabular rakamlarla.

Öğe listesi

Ad	Adet
Birinci öğe	1.240
İkinci öğe	86

YapmayınSayılar satır başına yaslı: basamaklar hizalanmıyor.

Satırı adlandırın

İlk hücreyi Table.RowHeader yapın; ekran okuyucu her hücreyi satırın adıyla birlikte okur.

Öğe listesi

Ad	Sahibi
Birinci öğe	Kullanıcı 1

Yapınİlk hücre satır başlığı.

Öğe listesi

Ad	Sahibi
Birinci öğe	Kullanıcı 1

Yapmayınİlk hücre sıradan hücre: satırın adı yok.

Durumu metinle gösterin

Hücredeki durum için Badge ya da StatusBadge kullanın; durumu yalnızca arka plan rengine yüklemeyin.

Öğe listesi

Birinci öğe	Etkin

YapınDurum Badge'de, metinle.

Öğe listesi

Birinci öğe

YapmayınDurumu yalnızca seçili arka plan anlatıyor.

İçerik

• Sütun başlığını kısa yazın, cümle düzeninde: “Oluşturulma tarihi”, “Sahibi”. Büyük harfe çevirmeyin; Türkçede büyük harf dönüşümü yanlış harf verebilir.
• Başlığı bir isim öbeği olarak yazın: “Öğe listesi”.
• Boş hücreyi boş bırakmayın; anlamı varsa “Yok” ya da “-” yazın.
• Tarihleri ve sayıları aynı sütunda aynı biçimde yazın.

İlgili bileşenler

• DataTable: Sıralama, süzme, sayfalama ve seçim gerektiren veriler için; aynı parçaları kullanır.
• Badge: Hücredeki durum için.
• StatusBadge: Sabit sözlükten durum için.
• DescriptionList: Anahtar-değer çiftleri için.