Proje: Veri tablosu

HTML kursu · Orta seviye · Ders 24/67

5 derslik projenin genel bakışı: erişilebilir bir veri tablosu.

Proje: Veri tablosu

Bu 5 derslik projede erişilebilir bir aylık satış raporu tablosu yapacaksın. Her derste tabloya bir parça ekleyecek, son derste tam bir rapor elinde olacak.

Projede şunları kullanacaksın:

Belge iskeleti (DOCTYPE, html, head, body)
table, caption, thead, tbody, tfoot
tr, th (scope), td
colgroup ve col ile sütun biçimlendirme
colspan ile hücre birleştirme
HTML yorumları ile belgeleme

Hazırsan başlayalım.

Veri tablosunun anatomisi

Bir veri tablosu birkaç bölümden oluşur:

caption: tablonun başlığı
thead: sütun başlıkları satırı
tbody: asıl veri satırları
tfoot: özet/toplam satırı
tr: bir satır
th: başlık hücresi
td: veri hücresi

Bu bölümler tabloyu hem görsel hem anlamsal olarak düzenler; ekran okuyucular için yapıyı netleştirir.

Erişilebilir tablo temelleri

Erişilebilir bir tabloda her th hücresi scope özniteliği taşır. Bu, hücrenin bir sütun başlığı (scope="col") ya da satır başlığı (scope="row") olduğunu ekran okuyucuya söyler. Böylece kullanıcı bir hücrenin değerini okurken hangi başlığa ait olduğunu duyar. Bu proje boyunca tüm başlık hücrelerine scope ekleyeceğiz.

Uygulama Boş belge iskeletiyle başla

Projeye başlarken boş bir HTML belge iskeleti yaz. İçinde DOCTYPE, <html>, <head>, boş <body> bulunsun. lang, meta, başlıkları sonraki derslerde ekleyeceğiz.

Örnek çözümü göster

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

Kendini test et

Hangi etiket tabloya görünür bir başlık verir?
- thead
- caption
- title
- th
Cevabı göster

caption — Doğru. caption tablonun başlığını taşır ve verinin üzerinde görünür.
Tablo bölümünü göreviyle eşleştir

caption

Tablo başlığı
thead

Başlık satırı bölümü
tbody

Gövde verisi bölümü
tfoot

Özet/toplam bölümü

Proje: Veri tablosu