HTML Tabloları

Verinin net satırları ve sütunları olduğunda — programlar, puan çizelgeleri, fiyat karşılaştırmaları, oturma planları — HTML table kullanın; boşluk yığını veya listelerden yapılmış sahte ızgara değil. Listeler tek ana eksende kümeleri ve dizileri öğretti. Tablolar iki boyutlu veriyi öğretir: her hücre, adlandırabileceğiniz bir etiketle satır–sütun kesişiminde oturur. Biri «ikinci satır, Score sütununda ne var?» diye sorarsa dürüst yanıt tablodur.

Tablo ne içindir

Tablo, bir ızgara boyunca ilişkileri ifade eder. Okuyucular değerleri hızlı karşılaştırmak için bir sütuna aşağı veya bir satır boyunca bakar. Yardımcı teknolojiler, başlıkları sıradan td metnini kalın göstermek yerine th ile işaretlediğinizde başlıkları veri hücreleriyle birlikte duyurabilir. Bu yüzden tablolar tablo bilgisine aittir — eski düzen eğitimlerinde olduğu gibi tüm sitenin banner, kenar çubuğu ve alt bilgisini iç içe table etiketleriyle kurmaya değil. İçerik gerçekten karşılaştırılabilir olgular ızgarasıysa tablo işaretlemesi karmaşıklığına değer.

Doğrudan yanıt

• table — tüm tablo
• tr — bir tablo satırı
• th — başlık hücresi (sütun veya satır etiketi)
• td — veri hücresi
  Başlık etiketlerini th içine koyun ki anlam insanlar ve yardımcı araçlar için net olsun. Satırlar arasında hücre sayısını tutarlı tutun; ta ki sonra colspan gibi ileri span özniteliklerini öğrenene kadar. Veri ızgaraları için tablolar; sayfa düzeni için CSS ve anlamsal bölümler. Kısa bir caption (ikinci demoda) ızgaraya gelen herkes için veri kümesini adlandırır.

Basit veri tablosu

th hücrelerinden oluşan bir başlık satırıyla başlayın, sonra td hücrelerinden veri satırları. Bu biçim birçok başlangıç skor tablosu ve karşılaştırma sayfasını kapsar.

Basit örneği okumak

• table tüm ızgarayı sarar
• Her tr bir yatay satırdır
• İlk satır sütun etiketleri («Name», «Score») için th kullanır
• Sonraki satırlar sıradan değerler için td kullanır
• Tarayıcı varsayılan stili kenarlıkları hafif gösterebilir veya göstermeyebilir — sonraki dersler kenarlıkları kapsar; önce yapı
• Satır başına hücreleri sayın: her iki veri satırında da iki hücre vardır, iki başlıkla uyumlu

Caption ve satır etiketleri

Bir caption herkes için tabloyu adlandırır. Satır başlıkları sütun başlıkları kadar önemli olduğunda ilk sütunda th her satırı etiketleyebilir. Caption’ı kısa ve spesifik tutun.

Caption örneğini okumak

• Yaygın başlangıç kalıplarında caption, table içindeki ilk çocuk olmalıdır
• Sütun başlıkları üst satırda th olarak kalır
• İlk sütundaki satır adları da th olabilir ki «Ada» bir etiket olsun, yalnızca sayıya benzeyen bir hücre değil
• Kalan hücreler gerçek puanlar için td kalır
• Hâlâ sayfa düzeni kurmuyorsunuz — küçük bir veri kümesini tanımlıyorsunuz

Tablolar vs listeler vs düzen

• Tek ana eksenli ilgili öğeler veya adımlar → listeler (önceki dersteki ul / ol)
• Satır ve sütunlarda karşılaştırılan değerler → tablolar
• Tüm sayfa bölgeleri (banner, sütunlar, alt bilgi) → sonra anlamsal yapı + CSS, değil dev iç içe düzen tabloları
  Eski «tablo düzeni» alışkanlıkları küçük ekranlarda duyarlılığı bozar ve erişilebilirliği zorlaştırır. Yalnızca logoyu menünün yanına koymak için tabloları iç içe geçiriyorsanız durun ve düzen derslerini bekleyin. Soru: «Bir ızgarada hücreleri mi karşılaştırıyorum, yoksa yalnızca sayfada kutular mı çiziyorum?»

Izgaralar için erişilebilirlik alışkanlıkları

Yalnızca görsel olarak başlık gibi görünen kalın td metnine gerçek th başlıkları tercih edin. Net bir caption (veya yakındaki bir başlık) ızgaraya girmeden önce konuyu söyler. Sekme veya kaydırma sırasında sütunlar dürüst kalsın diye satır hücre sayılarını hizalı tutun. scope gibi ileri öznitelikler karmaşık tablolarda başlık ilişkisini iyileştirir — önce temel th/td ayrımını sağlam öğrenin, sonra inceltin. Hangi hücrelerin etiket olduğunu işaretlemek için yalnızca renge güvenmeyin.

Editörünüzde alıştırma

1. İlk satırda iki başlık hücresi (th) olan bir table oluşturun.
2. Eşleşen td sayılı üç veri satırı ekleyin.
3. Tarayıcıda görüntüleyin ve ızgaranın soldan sağa, yukarıdan aşağıya beklediğiniz gibi okunduğunu doğrulayın.
4. İsteğe bağlı: bir caption ekleyin ve ilk sütunu ikinci örnekteki gibi satır-etiket th yapın.
5. Bilerek bir satırı eksik hücreyle bozun, tuhaf şekli not edin, sonra düzeltin.
6. Tablonun üstüne veya caption içine verinin neyi ölçtüğünü belirten bir cümle yazın.
7. Bir arkadaşınıza yalnızca başlıklarınızla hangi sütunun hangisi olduğunu sorun — yanlış tahmin ederse th metnini yeniden adlandırın.

Kolay hatalar

• Tüm siteleri dev iç içe tablolar olarak kurmak (eski düzen alışkanlığı)
• Hücreler gerçekten başlıkken yalnızca td kullanmak
• Satır başına uyumsuz hücre sayıları
• Basit bir ul/ol tek eksenli listeyi daha iyi ifade ederken tablo kullanmak
• Tabloyu insan tarafından okunabilir başlıksız bırakmak (caption veya heading)
• Modern alıştırma sayfalarına eski «düzen tablosu» parçacıklarını kopyalamak

Listelerden sonra bu nereye oturur

Listeler tek boyutlu koleksiyonları düzenler. Tablolar ızgaraları. Yakında kenarlık ve boşluk biçimlendireceksiniz; bu ders iskeleti kilitler: dürüst başlıklarla table, tr, th ve td. Veriyi tablo halinde tutun, düzeni başka yerde; sonraki CSS zaten anlamı olan bir yapıyı süsleyecektir.

Özet

• Tablolar table + tr + th / td kullanır
• Tablo veri ızgaraları için; modern tam sayfa düzeni için değil
• Başlık etiketleri için th tercih edin (sütunlar ve yararlıysa satırlar)
• caption veri kümesini adlandırmaya yardım eder
• Satırlar arasında hücre sayılarını tutarlı tutun
• İkinci ekseni olmayan basit kümeler ve adımlar için listeler daha iyidir