Fiyat tablosu
Üç paketin fiyatlarını karşılaştıran bir tablo bölümü yazarsın.
Fiyatlandırma bölümü
Fiyatlandırma bölümü planları yan yana karşılaştırır. Bunun için <table> en uygun araçtır. Tabloda her satır bir plan, her sütun bir özelliktir.
Yapı şöyledir:
<caption>: tablonun başlığı<thead>: sütun başlıkları satırı<tbody>: plan verileri<th>başlık,<td>veri hücresi
Tablo öğeleri sırası
Tablo öğeleri belli bir sırayla yazılır. <caption> ilk çocuktur ve tabloyu tek cümleyle tanımlar. <thead> başlık satırını, <tbody> veri satırlarını sarar. Her satır <tr> içindedir; hücreler <th> veya <td> olur.
Bu ayrım ekran okuyucunun sütunları seslendirirken başlıkları doğru eşlemesini sağlar ve tabloyu okunabilir kılar.
Uygulama Fiyat tablosu bölümünü ekle
Önceki adımın özellik bölümü içeren <main>'ini al. Özellik section'ından sonra yeni bir <section> ekle. İçine dolu bir h2 ve bir table koy. table içine dolu bir caption, thead (tr ve dolu th'lerle) ve tbody (en az iki tr, her birinde dolu td'lerle) ekle.
Ö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>TaskFlow - Görev yönetimi</title>
</head>
<body>
<main>
<h1>Görevlerini akılda değil, akışta tut</h1>
<p>TaskFlow ile ekibinin görevlerini, son tarihlerini ve ilerlemesini tek panelden yönet.</p>
<a href="/kayit">Ücretsiz başla</a>
<button>Tur iste</button>
<section>
<h2>Neden TaskFlow?</h2>
<article>
<h3>Kanban panoları</h3>
<p>Görevleri <strong>sürükle bırak</strong> ile taşı, akışı <em>canlı</em> gör.</p>
</article>
<article>
<h3>Otomatik hatırlatma</h3>
<p>Son tarih yaklaşırken <strong>e-posta</strong> ve <em>anlık bildirim</em> al.</p>
</article>
<ul>
<li><strong>Takvim</strong> görünümü</li>
<li><strong>Dosya</strong> ekleri</li>
<li><strong>Etiket</strong> sistemi</li>
</ul>
</section>
<section>
<h2>Planlar</h2>
<table>
<caption>TaskFlow fiyatlandırması</caption>
<thead>
<tr>
<th>Plan</th>
<th>Fiyat</th>
<th>Üye</th>
</tr>
</thead>
<tbody>
<tr>
<td>Başlangıç</td>
<td>Ücretsiz</td>
<td>3</td>
</tr>
<tr>
<td>Pro</td>
<td>99 ₺/ay</td>
<td>Sınırsız</td>
</tr>
</tbody>
</table>
</section>
</main>
</body>
</html>Kendini test et
-
Tabloda sütun başlığı yazmak için hangi etiket kullanılır?
- td
- caption
- tbody
- th
Cevabı göster
th — Doğru. th başlık hücresidir; td normal veri hücresidir.
-
Tablonun başlık satırını saran etiketi yaz
<____> <tr> <th>Plan</th> <th>Fiyat</th> </tr> </thead>Cevabı göster
<thead> <tr> <th>Plan</th> <th>Fiyat</th> </tr> </thead> -
Tablo öğesini rolüyle eşleştir
- caption
- Tablo başlığı
- thead
- Başlık satırı
- tbody
- Veri gövdesi
- th
- Sütun başlığı