CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Özet - Ders programı tablosu

HTML kursu · Başlangıç · Ders 46/68

Tüm tablo öğelerini kullanarak haftalık bir ders programı tablosu oluşturursun.

Bu grupta öğrendiklerimiz

Bu grupta tabloların tüm temel yapı taşlarını gördün:

  • <table>, <tr>, <td> ile tablo iskeleti
  • <th> ve scope ile başlık hücreleri
  • <thead>, <tbody>, <tfoot> ile bölümler
  • <caption> ile tablo başlığı
  • colspan ve rowspan ile hücre birleştirme

Şimdi bunların hepsini birleştirip bir ders programı tablosu yapacağız.

Uygulama Ders programı tablosu yap

Body içine bir <table> ekle. <table> açılışından hemen sonra bir <caption> başlığı yaz (örnek: Haftalık Ders Programı). Sonra bir <thead> bölümü ekle; içinde <th scope="col"> ile Gün ve Ders sütun başlıkları olsun. Son olarak bir <tbody> bölümü ekle; içinde en az bir <tr> satırı ve o satırda iki <td> olsun (örnek: Pazartesi / Matematik).

Örnek çözümü göster 
<body>
  <table>
    <caption>Haftalık Ders Programı</caption>
    <thead>
      <tr>
        <th scope="col">Gün</th>
        <th scope="col">Ders</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Pazartesi</td>
        <td>Matematik</td>
      </tr>
    </tbody>
  </table>
</body>

Kendini test et

  1. Etiketi rolüyle eşleştir

    <table>
    Tablo kabı
    <tr>
    Satır
    <th>
    Başlık hücresi
    <caption>
    Tabloyu tanıtan yazı
    <thead>
    Başlık satırı bölümü

  2. Aşağıdakilerden hangisi tabloda isteğe bağlıdır (her tabloda bulunmak zorunda değil)?

    • <table>
    • <caption>
    • <tr>
    • <td>
    Cevabı göster

    <caption> — Doğru. <caption> yararlıdır ama zorunlu değildir; table, tr ve td ise tablonun temelidir.

  3. Başlık bölümünü aç

    <table>
  ____
    <tr><th scope="col">Gün</th><th scope="col">Ders</th></tr>
  </thead>
  <tbody><tr><td>Pazartesi</td><td>Matematik</td></tr></tbody>
</table>
    Cevabı göster 
    <table>
  <thead>
    <tr><th scope="col">Gün</th><th scope="col">Ders</th></tr>
  </thead>
  <tbody><tr><td>Pazartesi</td><td>Matematik</td></tr></tbody>
</table>

Başlangıç bölümündeki tüm dersler

1 Belge temelleri

  1. HTML nedir?
  2. Belge iskeleti
  3. Head ve meta etiketleri
  4. Başlık ve dil
  5. Yorumlar ve okunabilirlik
  6. Özet - İlk HTML sayfam

2 Metin içeriği

  1. Başlıklar: h1–h6
  2. Paragraflar
  3. Satır sonu ve yatay çizgi
  4. Vurgu ve önemli metin
  5. Alıntı ve kaynak
  6. Özet - Makale sayfası

3 Proje: Hakkımda sayfası

  1. Proje: Hakkımda sayfası
  2. İskelet ve başlık
  3. Tanıtım metni
  4. Vurgu ve ayrım
  5. Proje sonu - Hakkımda

4 Bağlantılar ve gezinme

  1. Çapa bağlantıları
  2. Mutlak ve göreli URL'ler
  3. Sayfa içi bağlantılar
  4. Bağlantı hedefleri
  5. E-posta ve telefon bağlantıları
  6. Özet - Gezinme menüsü

5 Listeler

  1. Sırasız listeler
  2. Sıralı listeler
  3. Açıklama listeleri
  4. İç içe listeler
  5. Liste öğelerinde bağlantı
  6. Özet - İçindekiler tablosu

6 Proje: Kartvizit sayfası

  1. Proje: Kartvizit sayfası
  2. İsim ve unvan
  3. İletişim listesi
  4. Beceriler ve bağlantılar
  5. Proje sonu - Kartvizit

7 Görseller ve medya

  1. Görsel ekleme
  2. Görsel boyutları
  3. Figure ve figcaption
  4. Ses ve video
  5. Alternatif kaynaklar
  6. Özet - Medya galerisi

8 Tablolara giriş

  1. Tablo iskeleti
  2. Başlık hücreleri
  3. Tablo bölümleri
  4. Başlık ve caption
  5. Hücre birleştirme
  6. Özet - Ders programı tablosu

9 Proje: Tarif sayfası

  1. Proje: Tarif sayfası
  2. Tarif başlığı ve özet
  3. Malzeme listesi
  4. Adımlar ve pişirme tablosu
  5. Proje sonu - Tarif sayfası

10 Formlara giriş

  1. Form iskeleti
  2. Etiketli input
  3. Input türleri
  4. Textarea ve button
  5. Seçim alanları
  6. Özet - Geri bildirim formu

11 Anlamsal etiketlere giriş

  1. Anlamsal etiketler neden önemli
  2. Header ve footer
  3. Nav ve main
  4. Article ve section
  5. Aside ve address
  6. Özet - Anlamsal blog iskeleti

12 Başlangıç finali

  1. Meydan okuma - Belge iskeleti
  2. Meydan okuma - Metin ve bağlantılar
  3. Meydan okuma - Listeler ve tablolar
  4. Meydan okuma - Form ve anlamsal yapı
  5. Meydan okuma - Başlangıç projesi