Meydan okuma - Listeler ve tablolar

İç 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

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>

İ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.
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

Sıradaki ders: Meydan okuma - Form ve anlamsal yapı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler