Tailwind CSS Academy · Ders

Veri Tablosu ve Grafik Yer Tutucuları

4. ders / 413 adım

Veri Tablosu ve Grafik Yer Tutucuları, CoddyKit'te ücretsiz bir Tailwind CSS Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Tailwind CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.

Gösterge Panellerinde Veri Tablolarının Rolü

Veri tabloları, yönetim gösterge panellerindeki en yaygın bileşenlerden biridir. Yapılandırılmış kayıtları (kullanıcılar, siparişler, işlemler) satır ve sütunlar hâlinde, çoğunlukla sıralama, filtreleme ve sayfalama denetimleriyle birlikte görüntüler. İyi stillendirilmiş bir Tailwind tablosu okunabilir, kolay taranabilir ve etkileşimlidir. Tablo genellikle ana içerik alanında istatistik kartlarının altına yerleştirilir.

Tablo Kapsayıcısı ve Sarmalayıcısı

Tabloyu rounded-xl bg-white shadow-sm overflow-hidden sınıflarına sahip bir kart kapsayıcısının içine alın. overflow-hidden, kartın kenar yarıçapına uyması için tablo köşelerini kırpar. Kartın içine tablo başlığını ve eylem düğmelerini içeren bir tablo üst bilgisi ekleyin; ardından düzeni bozmadan mobilde yatay kaydırmaya izin veren bir overflow-x-auto div'i yerleştirin.

<div class="rounded-xl bg-white shadow-sm overflow-hidden">
  <!-- Table header bar -->
  <div class="flex items-center justify-between border-b border-gray-100 px-6 py-4">
    <h3 class="font-semibold text-gray-900">Recent Users</h3>
    <button class="text-sm font-medium text-blue-600 hover:text-blue-700">View all</button>
  </div>
  <!-- Scrollable table -->
  <div class="overflow-x-auto">
    <table class="w-full text-sm">
      <!-- thead and tbody -->
    </table>
  </div>
</div>

Tablo Üst Bilgi Satırı

thead, sütun etiketlerini içerir. Başlık satırının arka planını veri satırlarından görsel olarak ayırmak için bg-gray-50 kullanın. Her th öğesine px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 sınıflarını ekleyin; bu, kompakt ve profesyonel görünümlü klasik bir küçük büyük harf başlık stilidir.

<thead class="bg-gray-50">
  <tr>
    <th scope="col"
        class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">
      Name
    </th>
    <th scope="col"
        class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">
      Email
    </th>
    <th scope="col"
        class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">
      Status
    </th>
    <th scope="col"
        class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">
      Role
    </th>
    <th scope="col" class="relative px-6 py-3"><span class="sr-only">Actions</span></th>
  </tr>
</thead>

Çizgili Tablo Satırları

Değişimli satır renkleri (çizgili satırlar), yoğun tablolarda okunabilirliği artırır ve bir satırı sütunlar boyunca takip etmeyi kolaylaştırır. Tailwind'de, çift satırları renklendirmek ve tek satırları beyaz bırakmak için tr öğelerinde even:bg-gray-50 değişkenini kullanın. Kullanıcının imlecinin üzerindeki satırı belirginleştirmek için hover:bg-blue-50 transition-colors sınıflarını ekleyin.

<tbody class="divide-y divide-gray-100 bg-white">
  <tr class="even:bg-gray-50 hover:bg-blue-50 transition-colors">
    <td class="whitespace-nowrap px-6 py-4">
      <div class="flex items-center gap-3">
        <img src="/avatar.jpg" class="h-8 w-8 rounded-full" alt="">
        <div>
          <p class="font-medium text-gray-900">Alice Johnson</p>
          <p class="text-xs text-gray-500">Joined Jan 2026</p>
        </div>
      </div>
    </td>
    <td class="whitespace-nowrap px-6 py-4 text-gray-500">alice@example.com</td>
    <!-- More cells -->
  </tr>
</tbody>

Tablo Hücrelerinde Durum Rozeti

Durum sütunları, durumu bir bakışta iletmek için küçük, renkli rozetler kullanır. Üç veya dört durum değişkeni tanımlayın: Etkin (yeşil), Etkin değil (gri), Beklemede (sarı), Askıya alındı (kırmızı). Her rozet, durum değerine göre koşullu olarak uygulanan, renge uygun arka plan ve metin sınıflarıyla birlikte inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold sınıflarını kullanır.

<td class="whitespace-nowrap px-6 py-4">
  <!-- Active -->
  <span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5
               text-xs font-semibold text-green-800">
    Active
  </span>

  <!-- Pending -->
  <span class="inline-flex items-center rounded-full bg-yellow-100 px-2.5 py-0.5
               text-xs font-semibold text-yellow-800">
    Pending
  </span>

  <!-- Suspended -->
  <span class="inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5
               text-xs font-semibold text-red-800">
    Suspended
  </span>
</td>

Tablo İşlem Düğmeleri

Her satırın son sütunu, satır düzeyindeki işlemleri içerir: Düzenle, Sil veya Görüntüle. Bunları th ve td öğelerinde text-right ile hizalayın. Tabloyu sade tutmak için bağlantı biçiminde stillendirilmiş, yalnızca metin içeren düğmeler kullanın: Düzenle için text-sm font-medium text-blue-600 hover:text-blue-700, Sil için text-red-500 hover:text-red-700. Aralarına hafif bir ayırıcı ekleyin: mx-3 text-gray-300.

<td class="whitespace-nowrap px-6 py-4 text-right">
  <a href="/users/1/edit"
     class="text-sm font-medium text-blue-600 hover:text-blue-700">
    Edit
  </a>
  <span class="mx-2 text-gray-300">|</span>
  <button onclick="deleteUser(1)"
          class="text-sm font-medium text-red-500 hover:text-red-700">
    Delete
  </button>
</td>

Sayfalama Denetimleri

Sayfalama denetimleri tablonun altında yer alır. Yaygın bir düzen, solda 48 sonuçtan 1–10 arası gösteriliyor metnini, sağda ise Önceki/Sonraki düğmelerini gösterir. Sayfalama çubuğunun kapsayıcısı için flex items-center justify-between border-t border-gray-100 px-6 py-4 kullanarak onu üstündeki tabloya görsel olarak bağlı tutun.

<div class="flex items-center justify-between border-t border-gray-100 px-6 py-4">
  <p class="text-sm text-gray-500">
    Showing <span class="font-medium">1</span> to <span class="font-medium">10</span>
    of <span class="font-medium">48</span> results
  </p>
  <div class="flex gap-2">
    <button class="rounded-lg border border-gray-300 px-3 py-1.5 text-sm
                   font-medium text-gray-700 transition hover:bg-gray-50
                   disabled:cursor-not-allowed disabled:opacity-40"
            disabled>
      Previous
    </button>
    <button class="rounded-lg border border-gray-300 px-3 py-1.5 text-sm
                   font-medium text-gray-700 transition hover:bg-gray-50">
      Next
    </button>
  </div>
</div>

Grafik Yer Tutucu Kapsayıcısı

Grafik yer tutucu bileşenleri, bir grafik kitaplığının (örneğin Chart.js veya Recharts) oluşturacağı grafik için doğru düzeni ve iskelet yapısını sağlar. Yer tutucu kartında grafik başlığının ve zaman aralığı seçicisinin bulunduğu bir başlık, grafik tuvali için sabit yüksekliğe sahip geniş bir içerik alanı ve isteğe bağlı olarak aşağıda gösterilen açıklama öğeleri bulunur. Yer tutucuların kullanılması, grafik verileri yüklenmeden önce gösterge tablosu düzeninin sabit kalmasını sağlar.

<div class="rounded-xl bg-white shadow-sm">
  <!-- Chart header -->
  <div class="flex items-center justify-between border-b border-gray-100 px-6 py-4">
    <h3 class="font-semibold text-gray-900">Revenue Over Time</h3>
    <select class="rounded-lg border border-gray-200 px-3 py-1.5 text-sm text-gray-600">
      <option>Last 7 days</option>
      <option>Last 30 days</option>
      <option>Last 90 days</option>
    </select>
  </div>
  <!-- Chart canvas area -->
  <div class="h-64 p-6">
    <!-- Chart.js or Recharts renders here -->
    <canvas id="revenue-chart"></canvas>
  </div>
</div>

İskelet Grafik Yer Tutucusu

Grafik verileri yüklenmeden önce grafiğin şeklini taklit eden bir iskelet yer tutucusu gösterin. Çubuk grafik yer tutucusu için animate-pulse sınıfına sahip, esnek düzende bir çubuk satırı kullanın. Çizgi grafik için yuvarlatılmış köşelere ve animate-pulse özelliğine sahip basit bir dikdörtgen yeterlidir. Bu, grafik kitaplığı başlatılmadan önce boş beyaz bir kutunun aniden görünmesini önler.

<!-- Bar chart skeleton -->
<div class="flex h-52 items-end gap-2 animate-pulse">
  <div class="flex-1 rounded-t bg-gray-200" style="height: 60%"></div>
  <div class="flex-1 rounded-t bg-gray-200" style="height: 80%"></div>
  <div class="flex-1 rounded-t bg-gray-200" style="height: 45%"></div>
  <div class="flex-1 rounded-t bg-gray-200" style="height: 90%"></div>
  <div class="flex-1 rounded-t bg-gray-200" style="height: 70%"></div>
  <div class="flex-1 rounded-t bg-gray-200" style="height: 55%"></div>
  <div class="flex-1 rounded-t bg-gray-200" style="height: 75%"></div>
</div>

Yan Yana Grafik ve Tablo Düzeni

Yaygın bir gösterge tablosu ızgarası, bir grafik bileşenini ve bir tabloyu (veya ikincil istatistiği) yan yana yerleştirir. İki sütunlu bir ızgara kullanın: grid grid-cols-1 gap-6 lg:grid-cols-2. Grafik ve tablo, eşit genişlikteki sütunları doldurur. Ayrıca bir bileşenin tam genişliğe yayılmasını sağlamak için lg:col-span-2 kullanabilir, daha küçük bileşenleri ise üç sütunlu bir alt ızgarada birer sütuna yerleştirebilirsiniz.

<!-- Main dashboard grid: chart + top-users table -->
<div class="mt-6 grid grid-cols-1 gap-6 lg:grid-cols-3">
  <!-- Line chart (2/3 width) -->
  <div class="rounded-xl bg-white shadow-sm lg:col-span-2">
    <!-- Chart content -->
  </div>

  <!-- Top users list (1/3 width) -->
  <div class="rounded-xl bg-white shadow-sm">
    <!-- Mini leaderboard -->
  </div>
</div>

Tablolar için Boş Durum

Bir tabloda veri olmadığında — örneğin sonuç sayısı sıfıra düşecek şekilde filtrelendiğinde veya yeni bir hesapta — tablo gövdesinin içinde ortalanmış bir boş durum gösterin. Bir simge, başlık, açıklama ve CTA düğmesi içeren esnek sütun düzeni kullanın. Kullanıcıların sayfanın bozuk mu yoksa yalnızca boş mu olduğunu anlayamamasına neden olan, bağlam içermeyen boş beyaz bir kutu göstermekten kaçının.

<!-- Empty state inside a table or list container -->
<div class="flex flex-col items-center justify-center py-16 text-center">
  <svg class="h-12 w-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
          d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0H4"/>
  </svg>
  <h3 class="mt-4 font-semibold text-gray-900">No users found</h3>
  <p class="mt-1 text-sm text-gray-500">Get started by adding your first team member.</p>
  <button class="mt-6 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white">
    Add user
  </button>
</div>

Kısa Kontrol

Bu dersteki Tailwind CSS Mastery kavramlarını anlayıp anlamadığınızı sınayın.

İnteraktif derste cevapla

Ders Özeti

Bu derste şunları öğrendiniz: çizgili satırlar, durum rozetleri ve işlem düğmeleri içeren stillendirilmiş bir veri tablosu oluşturmayı, devre dışı durumlara sahip sayfalama denetimleri eklemeyi ve iskelet yükleyiciler ile boş durumlar içeren grafik yer tutucu kapsayıcıları oluşturmayı. Sırada Tailwind ile CSS mimarisini ve dosya düzenlemesini inceleyeceğiz.

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 30
Dersler: 120

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Veri Tablosu ve Grafik Yer Tutucuları” dersi ücretsiz mi?

Evet — “Veri Tablosu ve Grafik Yer Tutucuları” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Tailwind CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.

“Veri Tablosu ve Grafik Yer Tutucuları” dersinde ne öğreneceğim?

Şeritli satırlar, işlem düğmeleri ve sayfalandırma denetimleri içeren sıralanabilir görünümlü bir veri tablosu; ayrıca iskelet yükleyicilere sahip yer tutucu grafik kapsayıcıları oluşturun. Tailwind CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Tailwind CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Tailwind CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Veri Tablosu ve Grafik Yer Tutucuları” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Tailwind CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Tailwind CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Kontrol Paneli İskeleti ve Kenar Çubuğu
Üst Çubuk ve İçerik Haritası
İstatistik Kartları ve KPI Pencere Öğeleri
Veri Tablosu ve Grafik Yer Tutucuları

← Tailwind CSS Academy Sayfasına Dön