Açıklama ve Örnekler

HTML Tablo Etiketleri

Karmaşık veri kümelerini, istatistikleri ve karşılaştırmalı bilgileri; satır ve sütunlardan oluşan düzenli bir ızgara (grid) yapısında sunarak, kullanıcılar için okunabilir ve taranabilir hale getiren yapı taşlarıdır.

Bilgiyi Hızlıca Al Ana Konu

Web sayfalarında karmaşık veri kümelerini, istatistikleri, finansal raporları, takvimleri, ürün karşılaştırmalarını veya zaman çizelgelerini, satır ve sütunlardan oluşan düzenli bir ızgara (grid) yapısında sunmak için Tablo Etiketleri kullanılır.

Bu etiket grubu (<table>, <tr>, <td>, <th> vb. ), iki boyutlu verilerin insanlar tarafından kolayca taranabilir ve anlaşılabilir hale getirilmesini sağlayan temel mekanizmadır.

"Tablosal Veri" (Tabular Data) Kavramı ve Kullanım Sınırları

HTML tablolarının kullanımında en kritik ayrım, "Veri" ile "Düzen" arasındaki farktır.

Web'in ilk yıllarında (2000'lerin başı), CSS teknolojisi henüz gelişmemişken, web geliştiriciler sayfa düzenlerini ( Header, Sidebar, Footer yerleşimi ) oluşturmak için tabloları kullanırlardı.

Ancak günümüzde bu yöntem, kesinlikle kaçınılması gereken eski ve hatalı bir tekniktir (Anti-Pattern).

Modern web standartlarında sayfa düzeni CSS (Flexbox ve Grid) ile yapılmalı; HTML tabloları ise yalnızca ve sadece adından da anlaşılacağı gibi "Tablosal Veri" ( Tabular Data ) göstermek için kullanılmalıdır.

Yani, bir Excel dosyasında saklamayı düşüneceğiniz türden veriler ( öğrenci not listesi veya hava durumu raporu) HTML tabloları için doğru adaydır.

Semantik Yapı ve Erişilebilirlik (A11Y)

İyi kurgulanmış bir HTML tablosu, sadece <tr> (Satır) ve <td> (Veri) yığınından ibaret değildir. Modern tablolar, verinin okunabilirliğini ve makineler tarafından anlaşılabilirliğini artırmak için gelişmiş bir semantik hiyerarşiye sahiptir.

Tablonun başlık kısmı ( <thead> ), ana gövdesi ( <tbody> ) ve özet/dipnot kısmı ( <tfoot> ) ayrı etiketlerle tanımlanır.

Bu ayrım, tarayıcıların uzun tablolarda başlıkları sabitlemesine veya yazıcıdan çıktı alırken başlıkların her sayfada tekrar etmesine olanak tanır.

Erişilebilirlik açısından bakıldığında ise tablolar en karmaşık yapılardan biridir.

Görme engelli bir kullanıcının, ekran okuyucu yardımıyla "Hangi veri, hangi başlığa ait?" sorusuna yanıt bulabilmesi için, tablonun sadece görsel değil, kodsal olarak da doğru etiketlenmesi (<th> kullanımı ve scope niteliği) hayati önem taşır.

Html <table> Etiketi Ana Kapsayıcı

Genel Bakış

<table> etiketi, tüm tablo yapısının başlangıcını ve bitişini tanımlayan "kök" ( root ) elementtir.

Diğer tüm tablo etiketleri ( tr, td, th, caption vb. ) bu etiketin içinde yer almak zorundadır.

Tarayıcıya "Burada normal metin akışı bitiyor, ızgara tabanlı bir veri gösterimi başlıyor" mesajını verir.

Varsayılan olarak çerçevesiz ve sıkışık bir görünüme sahiptir; bu nedenle modern web tasarımında genellikle CSS ile genişlik ( width: 100% ) ve kenarlık (border) stilleri atanarak şekillendirilir.

Bu etiket, içerisindeki verilerin rastgele bir metin yığını olmadığını, aksine her bir hücrenin diğerleriyle satır ve sütun bazında ilişkili olduğu organize bir veri kümesi olduğunu semantik olarak mühürler.

Erişilebilirlik araçları ( ekran okuyucular ), <table> etiketini algıladığında standart okuma modundan "Tablo Modu"na geçerek, kullanıcılara hücreler arasında dikey ve yatay gezinme imkanı tanır; bu da etiketin sadece görsel değil, işlevsel bir kapsayıcı olduğunu kanıtlar.

Table Attribute'leri Tablo Gösterimi

Attribute
Açıklama
Kullanım ve Notlar
border
Tablonun ve hücrelerin etrafındaki kenarlığın kalınlığını piksel cinsinden belirlerdi. border="0" değeri, tabloları sayfa düzeni için kullanırken kenarlıkları gizlemek amacıyla sıkça kullanılırdı.
Deprecated - Günümüzde bunun yerine CSS'teki border özelliği kullanılmalıdır.
cellpadding
Hücrenin kenarı ile içindeki metin arasındaki boşluğu (iç dolgu) ayarlardı. Bu, metnin hücre duvarlarına yapışmasını engellerdi.
Deprecated - Modern karşılığı CSS'teki padding özelliğidir.
cellspacing
Bitişik hücreler arasındaki mesafeyi belirlerdi. Bu değer artırıldığında hücreler birbirinden uzaklaşırdı.
Deprecated - Günümüzde bu etkiyi yaratmak için CSS'teki border-spacing (veya border-collapse: separate) özelliği kullanılır.
width ve height
Tablonun genişlik ve yüksekliğini piksel veya yüzde olarak sabitlerdi. Bu, responsive (duyarlı) tasarımı imkansız kıldığı için terk edilmiştir.
Deprecated - Yerine CSS width ve height özellikleri (özellikle yüzde veya max-width birimleri) kullanılmalıdır.
align ve valign
Tablonun sayfa içindeki yatay hizalamasını (left, center, right) ve hücre içeriğinin dikey hizalamasını (top, middle, bottom) kontrol ederdi.
Deprecated - Artık bu işlemler için CSS'teki margin, float, text-align ve vertical-align özellikleri standarttır.
bgcolor ve background
Tabloya veya hücreye arka plan rengi veya görseli eklemek için kullanılırdı.
Deprecated - Bu stil işlemleri artık tamamen CSS background-color ve background-image ile yönetilmektedir.
frame ve rules
Tablonun sadece dış çerçevesinin hangi kenarlarının görüneceğini (frame) veya iç çizgilerin nasıl çizileceğini (rules) belirleyen, az bilinen eski niteliklerdir.
Deprecated - Tüm bu kenarlık kontrolleri artık CSS border ile çok daha hassas yapılabilmektedir.
summary
Tablonun içeriğini özetleyen, kullanıcının görmediği ancak ekran okuyucular için tasarlanmış bir nitelikti.
Deprecated - HTML5'te kaldırılmıştır; bunun yerine görünür bir başlık için <caption> etiketi veya teknik açıklama için aria-label kullanılmalıdır.
id
Tabloya sayfa içinde benzersiz bir kimlik (identifier) verir. Özellikle JavaScript ile tablo verilerine erişmek veya CSS ile o spesifik tabloyu stillendirmek için kritiktir.
Global attribute - Örn: id="siparis-tablosu"
class
Tabloya bir veya daha fazla stil sınıfı atar. Birden fazla tablonun aynı görsel temaya (örneğin "zebra çizgili" veya "karanlık mod") sahip olmasını sağlamak için kullanılır.
Global attribute - Örn: class="table table-striped"
style
Tabloya doğrudan satır içi (inline) CSS yazmak için kullanılır. Ancak kodun bakımı zorlaştığı için, stillerin harici bir CSS dosyasında tutulması ve class ile çağrılması her zaman daha iyi bir pratiktir.
Global attribute - Harici CSS dosyaları tercih edilmelidir.
title
Kullanıcı fare ile tablonun üzerine geldiğinde (hover), küçük bir ipucu kutucuğu (tooltip) içinde ek bilgi gösterilmesini sağlar.
Global attribute - Erişilebilirlik ve kullanıcı deneyimi için faydalıdır.
lang
Tablo içindeki içeriğin hangi dilde yazıldığını (Örn: tr, en) belirtir. Bu, tarayıcıların çeviri özelliklerini doğru kullanması ve ekran okuyucuların doğru telaffuz yapması için önemlidir.
Global attribute - Erişilebilirlik ve SEO için önemlidir.
role
Tablonun semantik anlamını pekiştirmek veya değiştirmek için kullanılır (Örn: role="grid"). Ancak <table> etiketi zaten doğal olarak "tablo" rolüne sahip olduğu için, genellikle CSS ile tablo yapısı bozulduğunda (örneğin div'lerle tablo yapıldığında) anlamı geri kazandırmak için kullanılır.
Modern attribute - ARIA standartları kullanılır.
aria-label ve aria-describedby
Tabloya görünmeyen bir etiket veya açıklama ekler. Eğer tabloda görsel bir <caption> yoksa, ekran okuyucunun tabloyu tanıtabilmesi için hayati önem taşır.
Modern attribute - Örn: aria-label="Satış Raporları Tablosu"
</>
<table> Etiketi Örneği ( ) 
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Table Etiketi Örneği</title>
</head>
<body>

    <table border="1" width="100%">
    </table>

</body>
</html>

Html <tr> Etiketi Tablo Satırı (Table Row)

Genel Bakış

HTML tabloları, dikey sütunlar halinde değil, yatay katmanlar yani satır satır inşa edilir. <tr> (Table Row) etiketi, bu inşadaki her bir yatay bloğu oluşturan yapı taşıdır.

Tabloya ne kadar veri eklerseniz ekleyin, yeni bir veri setine (yeni bir kullanıcıya veya ürüne) geçmek için mutlaka yeni bir <tr> etiketi açmanız gerekir.

Bu etiket, teknik olarak doğrudan metin veya görsel barındırmaz; görevi, veriyi taşıyan hücreleri (<th> veya <td> ) bir arada tutan bir kapsayıcı olmaktır.

Bu etiketin semantik rolü, bir veritabanındaki "Kayıt" ( Record ) mantığıyla birebir örtüşür.

Yani bir <tr> bloğu, içindeki hücrelerle birlikte tek bir varlığa ("Ahmet Yılmaz" kullanıcısına ait tüm bilgilere) ait verilerin birleştiği anlamsal bir bütündür.

Ayrıca <tr>, tablonun görsel okunabilirliğini artırmak için de kilit bir rol oynar; uzun tablolarda gözün satırı takip etmesini kolaylaştıran "Zebra Çizgileri" ( bir satır koyu, bir satır açık renk ) efekti, genellikle bu etiketler hedeflenerek CSS ile uygulanır.

</>
<tr> Etiketi Örneği ( ) 
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>TR Etiketi Örneği</title>
</head>
<body>

    <h3>Haftalık Program Taslağı</h3>

    <table border="1" width="50%">
        <tr>
            Pazartesi Günü Satırı
        </tr>

        <tr>
            Salı Günü Satırı
        </tr>

        <tr>
            Çarşamba Günü Satırı
        </tr>
    </table>

</body>
</html>

Html <th> Etiketi Tablo Başlık Hücresi ve Veri Tanımlayıcı

<th> (Table Header) etiketi, tablodaki bir sütunun veya satırın başlığını tanımlayan, sıradan veri hücrelerinden ( <td> ) yapısal ve işlevsel olarak ayrılan özel bir hücredir.

Bu etiket, altındaki veya yanındaki sayısal/metinsel verilerin "ne olduğunu" ( Fiyat, Tarih, Ürün Adı gibi ) etiketleyerek veriye kimlik kazandırır.

Görsel Hiyerarşi ve Varsayılan Stil

Tarayıcılar, bu etiketin tablodaki hiyerarşik üstünlüğünü görsel olarak vurgulamak için, <th> içindeki metni varsayılan olarak kalın (bold) fontla yazar ve hücrenin ortasına (center) hizalar.

Bu varsayılan stil, insan gözünün tabloya baktığında veriler ile başlıkları anında ayırt etmesini ve tabloyu hızlıca taramasını sağlar.

Ancak bu görsel ayrım, CSS ile değiştirilebilir olsa da, etiketin semantik görevi değişmez.

Erişilebilirlik Köprüsü ve scope Niteliği

<th> etiketinin asıl gücü, Erişilebilirlik (Accessibility) teknolojilerinde ortaya çıkar.

Ekran okuyucu kullanan görme engelli bir kullanıcı, tablonun ortasındaki bir hücreye geldiğinde (150 TL), bu rakamın ne anlama geldiğini bilemeyebilir.

<th> etiketi, ekran okuyuculara bir bağlam sunar; okuyucu önce başlığı ( "Fiyat Sütunu" ) sonra veriyi ( "150 TL" ) seslendirir.

Bu ilişkiyi teknik olarak kusursuz hale getirmek için genellikle scope niteliği (scope="col" sütun için, scope="row" satır için) kullanılır; bu nitelik, başlığın yetki alanını makinelere net bir şekilde bildirir.

</>
<th> Etiketi Örneği ( ) 
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>TH Etiketi Örneği</title>
</head>
<body>

    <h3>Akıllı Telefon Karşılaştırma</h3>

    <table border="1" cellpadding="10" width="500">
        <tr>
            <th>Marka / Model</th>
            <th>Ekran Boyutu</th>
            <th>Depolama</th>
            <th>Fiyat</th>
        </tr>
        
        <tr>
            <td colspan="4" align="center">
                <i>(Veriler bir sonraki aşamada eklenecek...)</i>
            </td>
        </tr>
    </table>

</body>
</html>

Html <td> Etiketi Standart Veri Hücresi ve İçerik Alanı

<td> (Table Data) etiketi, bir HTML tablosunun en küçük yapı birimini ve asıl bilgi taşıyıcısını temsil eden standart veri hücresidir.

Tablonun iskeleti ve başlıkları <tr> ve <th> etiketleriyle kurulsa da, tablonun "gövdesini" yani kullanıcının aradığı asıl enformasyonu ( fiyatlar, isimler, tarihler ) bu etiket barındırır.

Bu hücreler sadece düz metinle sınırlı değildir; resimler, bağlantılar, listeler, form elemanları veya hatta başka bir tablo gibi her türlü HTML içeriğini kapsayabilir.

Görsel Sunum ve Yapısal Kural

Tarayıcılar, veri hücrelerini başlık hücrelerinden ayırt etmek ve okunabilirliği artırmak için görsel bir standart uygular.

<td> içindeki metinler varsayılan olarak normal (düz) yazı tipi ağırlığına sahiptir ve sola yaslı (left-aligned) olarak görüntülenir.

Bu sola yaslama, metinsel verilerin gözle takibini kolaylaştırır; ancak sayısal veriler (para birimi vb.) için bu davranış genellikle CSS ile sağa yaslanacak şekilde özelleştirilir.

Tablonun yapısal bütünlüğü açısından <td> etiketi matematiksel bir kurala tabidir: Bir satırdaki ( <tr> ) <td> sayısı, tablonun toplam sütun sayısını belirler.

Düzenli bir ızgara yapısı (grid) için her satırda eşit sayıda hücre bulunması zorunludur.

Eğer bir hücrenin birden fazla sütuna veya satıra yayılması gerekiyorsa, bu dengeyi korumak ve ızgarayı bozmamak için colspan (yatay birleştirme) veya rowspan (dikey birleştirme) nitelikleri devreye girer.

</>
<td> Etiketi Örneği ( ) 
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>TD Etiketi ve Tam Tablo</title>
</head>
<body>

    <h3>IMDb Top Listesi</h3>

    <table border="1" width="600">
        <tr>
            <th>Film Adı</th>
            <th>Yönetmen</th>
            <th>Yıl</th>
            <th>IMDb Puanı</th>
        </tr>

        <tr>
            <td><b>Esaretin Bedeli</b></td>
            <td>Frank Darabont</td>
            <td>1994</td>
            <td>9.3</td>
        </tr>

        <tr>
            <td>Baba (The Godfather)</td>
            <td>Francis Ford Coppola</td>
            <td>1972</td>
            <td>9.2</td>
        </tr>

        <tr>
            <td>Kara Şövalye</td>
            <td>Christopher Nolan</td>
            <td>2008</td>
            <td><a href="#">9.0 (İncele)</a></td>
        </tr>
    </table>

</body>
</html>

Html <thead> Etiketi Tablonun Başı ve Sabit Çerçevesi

<thead> (Table Head) etiketi, bir HTML tablosunun başlık kısmını içeren satırları (<tr> ve <th> elementlerini) bir grup olarak sarmalar.

Semantik gruplama etiketlerinin ilkidir ve tablonun başında, hemen <caption> etiketinden (tablo başlığı varsa) sonra ve ana gövde ( <tbody>) etiketinden önce yer almak zorundadır.

İşlevsel ve Semantik Önemi <thead> etiketi, içerdiği bilgileri, tablonun geri kalanındaki ( <tbody>) verilerden yapısal olarak ayırır.

Bu ayrım, sadece düzenli görünmekten öte, tarayıcılar, yazıcılar ve erişilebilirlik araçları için kritik işlevler sağlar:

Sabit Başlıklar (Sticky Headers):

Çok uzun tabloları görüntülerken, tarayıcılar kullanıcı tablo içeriğini dikey olarak aşağı kaydırsa bile, <thead> içine alınmış başlık satırlarını ekranın üstünde sabit (fixed) tutabilir.

Bu, kullanıcıların kaybolmadan hangi verinin hangi başlığa ait olduğunu sürekli görebilmesini sağlar.

Yazıcı Çıktısı (Print Repetition):

Tablonun çıktısı birden fazla sayfaya yayılıyorsa, tarayıcılar otomatik olarak <thead> içeriğini her yeni sayfanın başında tekrar eder.

Bu sayede çıktı alan kullanıcılar, her sayfada başlık satırını manuel olarak tekrar yazmak zorunda kalmaz.

Erişilebilirlik (A11Y):

Ekran okuyucular, <thead> etiketini gördüğünde, içerideki başlıkların tüm tablo için geçerli olduğunu anlar ve karmaşık tablo navigasyonunu buna göre kurgular.

Bu, <th> etiketlerinin erişilebilirlik gücünü pekiştirir.

</>
<thead> Etiketi Örneği ( ) 
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Tam Tablo Yapısı</title>
</head>
<body>

    <h3>Proje Geliştirme Takip Listesi</h3>

    <table border="1" width="70%">
        
        <thead>
            <tr>
                <th>Proje Adı</th>
                <th>Kategori</th>
                <th>Geliştirici</th>
                <th>Durum</th>
                <th>Teslim Tarihi</th>
            </tr>
        </thead>
        
        <tbody>
            <tr>
                <td>Kullanıcı Paneli API</td>
                <td>Backend</td>
                <td>Ahmet Kaya</td>
                <td>Tamamlandı</td>
                <td>14.09.2025</td>
            </tr>
            <tr>
                <td>Ana Sayfa Tasarımı</td>
                <td>Frontend</td>
                <td>Ayşe Demir</td>
                <td>Devam Ediyor</td>
                <td>28.09.2025</td>
            </tr>
            <tr>
                <td>Veritabanı Optimizasyonu</td>
                <td>DevOps</td>
                <td>Mehmet Yılmaz</td>
                <td>Beklemede</td>
                <td>05.10.2025</td>
            </tr>
        </tbody>
        
    </table>

</body>
</html>

Html <tbody> Etiketi Tablonun Ana İçerik Gövdesi

Genel Bakış

<tbody> (Table Body) etiketi, bir HTML tablosunun veri yoğunluğunu taşıyan, başlıklar ve dipnotlar dışında kalan asıl içerik satırlarını ( <tr> ) gruplandıran semantik bir kapsayıcıdır.

Bu etiket, tablonun başlık ( <thead> ) ve özet ( <tfoot> ) kısımlarından yapısal olarak ayrılarak, tarayıcılar ve yardımcı teknolojilere "Burası, kullanıcının inceleyeceği ham verilerin bulunduğu merkezdir" mesajını verir.

Bir tablo oluşturulurken <thead> veya <tfoot> kullanımı opsiyonel olsa da, tarayıcılar arka planda, herhangi bir kapsayıcı içine alınmamış tüm <tr> satırlarını otomatik olarak sanal bir <tbody> içine yerleştirerek işlerler; bu da etiketin mimari açıdan ne kadar temel bir zorunluluk olduğunu gösterir.

İşlevsel Ayrım ve Tarayıcı Yönetimi

<tbody> etiketinin kullanımı, sadece kodu düzenli tutmakla kalmaz, aynı zamanda tablonun davranışını ve görsel yönetimini kökten değiştirir.

Özellikle yüzlerce satırdan oluşan büyük veri tablolarında, <tbody> etiketi sayesinde tarayıcıya bağımsız bir kaydırma alanı (scrollable area) tanımlanabilir.

Bu sayede, kullanıcı tabloyu aşağı doğru kaydırırken, <thead> içindeki başlıklar en üstte sabit kalabilir ve kullanıcı verinin bağlamını kaybetmeden inceleme yapabilir.

Ayrıca, yazıcıdan çıktı alınırken bu etiket grubu, verinin sayfalara bölünmesini akıllıca yönetir; tablo birden fazla sayfaya taşarsa, tarayıcı <tbody> içeriğini bölerken başlıkları her sayfanın başına otomatik olarak ekleyebilir.

CSS açısından da büyük kolaylık sağlar; buna örnek olarak; tablonun sadece veri satırlarına "zebra çizgili" ( striped ) bir arka plan uygulamak istendiğinde, doğrudan <tbody> hedeflenerek başlıkların bu stilden etkilenmesi önlenir.

</>
<tbody> Etiketi Örneği ( ) 
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Tbody ve Thead Kullanımı</title>
</head>
<body>

    <h3>Şirket Personel Listesi</h3>

    <table border="1" width="600" cellpadding="8">
        
        <thead>
            <tr style="background-color: #f0f0f0;"> 
                <th>Sicil No</th>
                <th>Ad Soyad</th>
                <th>Departman</th>
                <th>Durum</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td><strong>#1042</strong></td>
                <td>Zeynep Yılmaz</td>
                <td>İnsan Kaynakları</td>
                <td>Aktif</td>
            </tr>

            <tr>
                <td><strong>#1043</strong></td>
                <td>Murat Demir</td>
                <td>Bilgi İşlem (IT)</td>
                <td>İzinde</td>
            </tr>

            <tr>
                <td><strong>#1044</strong></td>
                <td>Elif Kaya</td>
                <td>Pazarlama</td>
                <td>Aktif</td>
            </tr>

            <tr>
                <td><strong>#1045</strong></td>
                <td>Caner Erkin</td>
                <td>Muhasebe</td>
                <td>Ayrıldı</td>
            </tr>
        </tbody>

    </table>

</body>
</html>

Html <tfoot> Etiketi Tablo Alt Bilgisi ve Sonuç Özeti

<tfoot> (Table Footer) etiketi, bir HTML tablosunun sütunlarına ait özetleri, toplam sonuçları, dipnotları veya hesaplama bitişlerini gruplandıran semantik bir kapsayıcıdır.

Tıpkı <thead> etiketinin tablonun başını tutması gibi, <tfoot> etiketi de tablonun sonunu mühürler.

Genellikle finansal tabloların en altındaki "Genel Toplam" satırı veya bir veri setinin kaynakçası gibi, verinin kendisi olmayan ama veriden türetilen sonuçları barındırır.

Bu etiket, tablonun ana gövdesinden ( <tbody> ) yapısal olarak ayrılarak, tarayıcılara "Burası akan verinin bittiği ve nihai sonucun gösterildiği yerdir" mesajını verir.

Yapısal Konum ve Teknik Avantajlar

HTML5 standartlarına göre <tfoot> etiketi, kod sıralamasında <tbody> etiketinden sonra, tablonun kapanışından hemen önce yer almalıdır.

Ancak bu etiketin sağladığı teknik avantajlar, sadece görsel bir "en alt satır" olmanın çok ötesindedir. Tarayıcılar, çok uzun ve kaydırılabilir (scrollable) tablolarda <tfoot> içeriğini ekranın en altına sabitleyerek, kullanıcının toplam sonucu sürekli göz önünde tutmasına olanak tanır.

Benzer şekilde, tablo kağıda yazdırılmak istendiğinde ve veri birden fazla sayfaya taşıyorsa, <tfoot> içeriği sadece son sayfada değil, her sayfanın en altına otomatik olarak kopyalanabilir.

Bu özellik, özellikle fatura dökümleri veya envanter listeleri gibi resmi belgelerin web üzerinden sunulmasında kritik bir rol oynar.

</>
HTML <table> Full Tablo Örneği 1 (+) 
<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Tablo Örneği</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">

</head>

<body>

    <div class="table-container">
        <h2>Sipariş Sepetiniz</h2>

        <table>

            <thead>
                <tr>
                    <th>Ürün Adı</th>
                    <th>Kategori</th>
                    <th class="price-col">Birim Fiyat</th>
                    <th class="price-col">Adet</th>
                    <th class="price-col">Toplam</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>Mekanik Klavye (RGB)</td>
                    <td>Elektronik</td>
                    <td class="price-col">1.200 ₺</td>
                    <td class="price-col">1</td>
                    <td class="price-col">1.200 ₺</td>
                </tr>
                <tr>
                    <td>Kablosuz Mouse</td>
                    <td>Elektronik</td>
                    <td class="price-col">450 ₺</td>
                    <td class="price-col">2</td>
                    <td class="price-col">900 ₺</td>
                </tr>
                <tr>
                    <td>Geniş Mousepad</td>
                    <td>Aksesuar</td>
                    <td class="price-col">150 ₺</td>
                    <td class="price-col">1</td>
                    <td class="price-col">150 ₺</td>
                </tr>
            </tbody>

            <tfoot>
                <tr>
                    <td colspan="4" class="price-col">Ara Toplam:</td>
                    <td class="price-col">2.250 ₺</td>
                </tr>
                <tr>
                    <td colspan="4" class="price-col">KDV (%20):</td>
                    <td class="price-col">450 ₺</td>
                </tr>
                <tr style="background-color: #e67e22; color: #fff;">
                    <td colspan="4" class="price-col">GENEL TOPLAM:</td>
                    <td class="price-col">2.700 ₺</td>
                </tr>
            </tfoot>

        </table>
    </div>

</body>

</html>
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa;
    display: flex;
    justify-content: center;
    padding: 50px;
}

.table-container {
    width: 100%;
    max-width: 800px;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

h2 {
    color: #2c3e50;
    border-bottom: 2px solid #e67e22;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

thead {
    background-color: #2c3e50;
    color: #fff;
}

thead th {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 0.5px;
}

tbody tr:hover {
    background-color: #f1f2f6;
}

tfoot {
    background-color: #ecf0f1;
    color: #2c3e50;
    font-weight: bold;
}

tfoot td {
    border-bottom: none;
    font-size: 1.1em;
}

.price-col {
    text-align: right;
}
</>
HTML <table> Full Tablo Örneği 2 (+) 
<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Tablo Örneği</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">

</head>

<body>

    <div class="table-container">
        <h2>Sipariş Sepetiniz</h2>

        <table>

            <thead>
                <tr>
                    <th>Ürün Adı</th>
                    <th>Kategori</th>
                    <th class="price-col">Birim Fiyat</th>
                    <th class="price-col">Adet</th>
                    <th class="price-col">Toplam</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>Mekanik Klavye (RGB)</td>
                    <td>Elektronik</td>
                    <td class="price-col">1.200 ₺</td>
                    <td class="price-col">1</td>
                    <td class="price-col">1.200 ₺</td>
                </tr>
                <tr>
                    <td>Kablosuz Mouse</td>
                    <td>Elektronik</td>
                    <td class="price-col">450 ₺</td>
                    <td class="price-col">2</td>
                    <td class="price-col">900 ₺</td>
                </tr>
                <tr>
                    <td>Geniş Mousepad</td>
                    <td>Aksesuar</td>
                    <td class="price-col">150 ₺</td>
                    <td class="price-col">1</td>
                    <td class="price-col">150 ₺</td>
                </tr>
            </tbody>

            <tfoot>
                <tr>
                    <td colspan="4" class="price-col">Ara Toplam:</td>
                    <td class="price-col">2.250 ₺</td>
                </tr>
                <tr>
                    <td colspan="4" class="price-col">KDV (%20):</td>
                    <td class="price-col">450 ₺</td>
                </tr>
                <tr style="background-color: #e67e22; color: #fff;">
                    <td colspan="4" class="price-col">GENEL TOPLAM:</td>
                    <td class="price-col">2.700 ₺</td>
                </tr>
            </tfoot>

        </table>
    </div>

</body>

</html>
body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: #e0f7fa;
    display: flex;
    justify-content: center;
    padding: 50px;
}

.report-card {
    width: 100%;
    max-width: 750px;
    background-color: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 121, 107, 0.15);
}

h3 {
    text-align: center;
    color: #00695c;
    margin-top: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th,
td {
    padding: 12px 15px;
    text-align: left;
}

.num-col {
    text-align: right;
    font-family: 'Courier New', monospace;
    font-weight: bold;
}

thead tr {
    background-color: #009688;
    color: #ffffff;
}

thead th:first-child {
    border-top-left-radius: 8px;
}

thead th:last-child {
    border-top-right-radius: 8px;
}

tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}

tbody tr:hover {
    background-color: #b2dfdb;
    transition: background-color 0.2s;
}

.profit {
    color: #27ae60;
}

.loss {
    color: #c0392b;
}


tfoot tr {
    background-color: #004d40;
    color: #fff;
    font-weight: bold;
}

tfoot td:first-child {
    border-bottom-left-radius: 8px;
}

tfoot td:last-child {
    border-bottom-right-radius: 8px;
}