Toplam satırı
tfoot içine toplam/özet satırı eklersin.
Özet satırı: tfoot
tfoot tablonun özet satırını taşır: toplam, ortalama ya da genel sonuç. tbody'den sonra, </table>'den hemen önce gelir. Etiket hücresi th scope="row" (örn. "Toplam"), değer hücreleri td olur. Bu derste dört ayın adet ve ciro toplamını içeren bir satır ekleyeceğiz.
Toplam satırında th kullanımı
Toplam satırının ilk hücresi bir etikettir ("Toplam", "Ortalama" gibi). Bu yüzden th kullanmak doğrudur; scope="row" eklemek de tutarlıdır. Değer hücreleri td olur çünkü bunlar gerçek veridir. Bu ayrım hem görsel hem anlamsal olarak doğru olur: ekran okuyucu "Toplam, 1.450 adet" diye okur.
Uygulama tfoot ve toplam satırını ekle
Önceki dersin tablosunu al. </tbody>'den sonra bir <tfoot> aç. İçine bir <tr> ekle. İlk hücre th scope="row" (içeriği Toplam), ardından üç td: ilk td içerik olarak — (ürün adı yok), ikinci td 1.450, üçüncü td ₺145.000.
Ö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>Aylık Satış Raporu</title>
</head>
<body>
<table>
<caption>Aylık Satış Raporu — 2026</caption>
<thead>
<tr>
<th scope="col">Ay</th>
<th scope="col">Ürün</th>
<th scope="col">Adet</th>
<th scope="col">Ciro</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Ocak</th>
<td>Kulaklık</td>
<td>320</td>
<td>₺32,000</td>
</tr>
<tr>
<th scope="row">Şubat</th>
<td>Kale</td>
<td>280</td>
<td>₺28,000</td>
</tr>
<tr>
<th scope="row">Mart</th>
<td>Klavye</td>
<td>410</td>
<td>₺41,000</td>
</tr>
<tr>
<th scope="row">Nisan</th>
<td>Fare</td>
<td>440</td>
<td>₺44,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Toplam</th>
<td>—</td>
<td>1,450</td>
<td>₺145,000</td>
</tr>
</tfoot>
</table>
</body>
</html>Kendini test et
-
tfoot tablo yapısında nereye gelir?
- caption'dan önce
- caption'dan hemen sonra, thead'den önce
- tbody'den sonra, </table>'den önce
- head etiketinin içinde
Cevabı göster
tbody'den sonra, </table>'den önce — Doğru. tfoot tbody'den sonra ve table kapanışından önce yer alır.
-
tfoot açılış etiketini tamamla
<____> <tr> <th scope="row">Toplam</th> </tr> </tfoot>Cevabı göster
<tfoot> <tr> <th scope="row">Toplam</th> </tr> </tfoot> -
Tablo bölümünü rolüyle eşleştir
- thead
- Sütun başlıkları
- tbody
- Veri satırları
- tfoot
- Toplam satırı
- caption
- Tablo başlığı