Modern Web İçin Responsive Tablo ve Grafik Tasarımı

Büyük veri setlerini küçük ekranlara sığdırmak zorunluluk. Yanlış tasarım kullanıcıyı kaçırır. Bu rehber, performans odaklı responsive tablo ve veri görselleştirme adımlarını içerir. Modern web standartlarında, harici kütüphane yükü olmadan hafif çözümler esastır.

Adım 1: Mobilde Tablodan Karta Dönüşüm (CSS Grid/Flexbox)

Geniş tablolar mobilde okunmaz. En temiz yöntem: Masaüstünde standart table, ekranda küçülünce display: block ve data-label ile kart görünümü.

<td data-label="Kolon Adı"> özniteliklerini ekleyin.
CSS medya sorgusunda (@media (max-width: 768px)) tablo hücrelerini blok yapın.
td::before { content: attr(data-label); } ile etiketleri dinamik gösterin.

Adım 2: Sabit Kolonlu Yatay Kaydırma (Sticky Header/Column)

Veri yapısı bozulmamalıysa CSS position: sticky kullanın. İlk kolon veya başlık sabit kalır, kalan kısım kayar.

Kapsayıcıya overflow-x: auto atayın.
İlk kolon için: position: sticky; left: 0; background: #fff; z-index: 2;
Başlık satırı için: position: sticky; top: 0; z-index: 3;

İpucu: Her dijital ajans arayüz projesinde ağır JS kütüphaneleri yerine önce native CSS yeteneklerini denemelidir.

Adım 3: SVG ile Responsive Veri Görselleştirme

Canvas mobilde bulanıklaşabilir. SVG vektöreldir, CSS ile ölçeklenir, DOM erişimi sağlar.

Sabit genişlik yerine viewBox="0 0 500 300" ve width="100%" kullanın.
CSS vector-effect: non-scaling-stroke; ile çizgi kalınlığını sabitleyin.
Son trendler arasında yer alan mikro-grafikler (sparklines) için SVG <polyline> doğrudan yeterlidir.

Adım 4: Erişilebilirlik (A11y) Standartları

Görselleştirilen veriler ekran okuyucular tarafından taranabilmelidir.

Tablolarda <caption>, <th scope="col"> ve <th scope="row"> etiketlerini eksiksiz girin.
SVG grafiklere role="img" ve <title>/<desc> elementleri ekleyin.
Renk körlüğü için sadece renge dayalı gösterim yapmayın; desen veya ikon desteği verin.

Adım 5: Performans ve Lazy Render

Binlerce satırlık veri DOM'u kilitler. İstemci taraflı çözümler:

CSS content-visibility: auto ile ekran dışı tablo satırlarını atlayın.
Aşırı büyük listelerde virtual DOM veya Intersection Observer ile dinamik satır yüklemesi yapın.