CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Meydan okuma - Listeler ve tablolar

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

İç içe listeler ve bir program tablosu içeren bir sayfa yazarsın.

Listeler ve tabloları hatırla

Listeler ve tablolar, yinelenen bilgileri düzgün gösterir. <ul> sırasız, <ol> sıralı liste verir; her öğe <li> içine konur. Listeler iç içe de kullanılabilir: bir <li>'nin içinde yeni bir <ul> açarsan alt liste oluşur.

Tablolar <table> ile başlar; satırlar <tr>, hücreler <td>, başlık hücreleri <th> ile yazılır. <thead> ve <tbody> bölümleri tabloyu düzenler; colspan ile yan hücreleri, rowspan ile alt hücreleri birleştirebilirsin.

Uygulama İç içe liste ve program tablosu yaz

Body içine bir <h2> başlık ve altında bir <ul> listesi ekle. Listeden bir öğenin içine ikinci bir <ul> ile alt liste koy (iç içe liste). Ardından bir <table> kur; <caption>, <thead> içinde <th> başlık hücreleri ve <tbody> içinde en az bir satır olsun.

Örnek çözümü göster 
<body>
  <h2>Okuma Listem</h2>
  <ul>
    <li>
      Romanlar
      <ul>
        <li>Selim İleri</li>
        <li>Elif Şafak</li>
      </ul>
    </li>
    <li>Şiir</li>
  </ul>
  <table>
    <caption>Etkinlik Programı</caption>
    <thead>
      <tr>
        <th scope="col">Tarih</th>
        <th scope="col">Şehir</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>5 Mayıs</td>
        <td>İstanbul</td>
      </tr>
    </tbody>
  </table>
</body>

Kendini test et

  1. Tablo başlık hücresini yaz

    <table>
  <caption>Konser Programı</caption>
  <thead>
    <tr>
      <____ scope="col">Tarih</th>
      <th scope="col">Şehir</th>
    </tr>
  </thead>
</table>
    Cevabı göster 
    <table>
  <caption>Konser Programı</caption>
  <thead>
    <tr>
      <th scope="col">Tarih</th>
      <th scope="col">Şehir</th>
    </tr>
  </thead>
</table>

  2. İki sütunu birleştirmek için <td> etiketine hangi öznitelik verilir?

    • rowspan
    • span
    • colspan
    • merge
    Cevabı göster

    colspan — Doğru. colspan, bir hücrenin yan yana birden çok sütunu kaplamasını sağlar.

  3. Etiketi rolüyle eşleştir

    <ul>
    Sırasız liste
    <ol>
    Sıralı liste
    <li>
    Liste öğesi
    <table>
    Tablo kabı
    <th>
    Başlık hücresi

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