CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Veri görsel yapı

HTML kursu · İleri seviye · Ders 49/56

Veriyi tablo ve figure ile yapılandırırsın.

Tablo ile veri satırları

Satış panelinde üst ürünleri göstermek için bir <table> kullanırız. Tablo üç parçadan oluşur:

  • <thead>: başlık satırı
  • <tbody>: veri satırları
  • her satır <tr>, her hücre <th> veya <td>

Başlık hücreleri <th> ile, veri hücreleri <td> ile yazılır; bu ayrım ekran okuyucuya sütun adını duyurur.

KPI için figure

KPA (örn. aylık ciro) tek bir rakam ve kısa etiketten oluşur. Bunu <figure> içine alıp <figcaption> ile etiketleriz.

Figure, ilişkili görsel veya sayısal bir gösterimi taşır; figcaption ise onun başlığıdır. Böylece rakam ile etiket arasındaki bağ anlamsal olarak korunur.

Widget'ta figure ve tablo yan yana çalışır: biri özet, diğeri detay verir.

Uygulama Article içine figure ve tablo ekle

Önceki dersin widget kabını al. <article> içine önce bir <figure> ekle; içinde <figcaption> (içeriği Aylık ciro) ve bir <p> (içeriği ₺124.500) olsun.

Sonra aynı article içine bir <table> ekle. Tabloda <thead> içinde bir <tr> ve iki <th> (Ürün, Satış) olsun. <tbody> içinde en az iki <tr> ve her birinde iki <td> (ürün adı, satış adedi) bulunsun.

Örnek çözümü göster 
<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Satış Paneli</title>
  </head>
  <body>
    <section>
      <header>
        <h1>Satış Paneli</h1>
      </header>
      <main>
        <article>
          <figure>
            <figcaption>Aylık ciro</figcaption>
            <p>₺124.500</p>
          </figure>
          <table>
            <thead>
              <tr>
                <th>Ürün</th>
                <th>Satış</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Pamuklu tişört</td>
                <td>320</td>
              </tr>
              <tr>
                <td>Keten pantolon</td>
                <td>184</td>
              </tr>
            </tbody>
          </table>
        </article>
      </main>
    </section>
  </body>
</html>

Kendini test et

  1. Bir KPI kartı (örn. 'Aylık ciro: ₺124.500') için en uygun kapsayıcı hangisidir?

    • table — satır ve sütun yapısı
    • ul — liste
    • figure — etiketli görsel/sayısal gösterim
    • nav — menü
    Cevabı göster

    figure — etiketli görsel/sayısal gösterim — Doğru! KPA için figure + figcaption uygundur; tek bakışta etiket ve rakam gösterir.

  2. Tablo satırını tamamla

    <tr>
  <th>____</th>
  <td>Pamuklu tişört</td>
</tr>
    Cevabı göster 
    <tr>
  <th>Ürün</th>
  <td>Pamuklu tişört</td>
</tr>

  3. Tablo etiketlerini rolleriyle eşleştir

    thead
    Tablo başlığı
    tbody
    Tablo gövdesi
    tr
    Satır
    th
    Başlık hücresi
    td
    Veri hücresi

İleri seviye bölümündeki tüm dersler

1 İleri medya

  1. Loading lazy
  2. Decoding async
  3. Srcset ve sizes
  4. Width/height ve CLS
  5. Preload ve prefetch
  6. Özet - Performans galerisi

2 Picture ve responsive görsel

  1. Picture ve source
  2. Media özniteliği
  3. Type özniteliği
  4. Aspect-ratio
  5. Background ve img
  6. Özet - Responsive hero

3 Proje: Video oynatıcı

  1. Proje: Erişilebilir video oynatıcı
  2. Video iskeleti
  3. Track ve altyazı
  4. Poster ve önizleme
  5. Proje sonu - Video oynatıcı

4 Karmaşık formlar

  1. Form yönelimi
  2. Hidden input
  3. File upload
  4. Range ve color
  5. Output ve form event
  6. Özet - Ayarlar paneli

5 Meta veri ve SEO

  1. Meta description
  2. Open Graph
  3. Twitter card
  4. Canonical ve hreflang
  5. Title ve slug stratejisi
  6. Özet - SEO paketi

6 Proje: Schema.org işaretleme

  1. Proje: Schema.org işaretleme
  2. Itemtype ve itemid
  3. Itemprop
  4. Nested itemtype
  5. Proje sonu - Yapısal veri

7 Web bileşenleri HTML

  1. Template element
  2. Slot element
  3. Custom element isimleri
  4. Shadow DOM iskeleti
  5. Declarative shadow DOM
  6. Özet - Kart şablonu

8 Şablonlar ve partial

  1. Server-rendered vs client
  2. Partial HTML
  3. Data attributes
  4. Hydration hooks
  5. Noscript ve progressive
  6. Özet - Bileşen iskeleti

9 Proje: Dashboard widget

  1. Proje: Dashboard widget
  2. Widget iskeleti
  3. Veri görsel yapı
  4. Şablon ve slot
  5. Proje sonu - Widget

10 İleri seviye finali

  1. Meydan okuma - Responsive görsel
  2. Meydan okuma - Erişilebilir video
  3. Meydan okuma - Karmaşık form
  4. Meydan okuma - SEO ve yapısal veri
  5. Meydan okuma - İleri seviye projesi