HTML Ders 4: Tablo Kullanımı

HTML Tabloları

HTML tabloları, verileri satır ve sütun düzeninde göstermek için kullanılır. Tablolar, genellikle veri setlerini görselleştirmek ve düzenli bir yapı oluşturmak için kullanılır.

1. HTML Tablo Yapısı

Bir tablo, <table> etiketi ile oluşturulur. Satırlar <tr> etiketi ile, sütunlar ise <td> etiketi ile tanımlanır.



<table border="1">

    <tr>

        <td>Satır 1, Sütun 1</td>

        <td>Satır 1, Sütun 2</td>

    </tr>

    <tr>

        <td>Satır 2, Sütun 1</td>

        <td>Satır 2, Sütun 2</td>

    </tr>

</table>

2. Tablo Başlığı

Tabloda başlık hücreleri oluşturmak için <th> etiketi kullanılır.



<table border="1">

    <tr>

        <th>Ad</th>

        <th>Soyad</th>

        <th>Yaş</th>

    </tr>

    <tr>

        <td>Ahmet</td>

        <td>Yılmaz</td>

        <td>25</td>

    </tr>

</table>

3. Tabloda Hücre Birleştirme

Hücreleri birleştirmek için colspan (sütun birleştirme) ve rowspan (satır birleştirme) kullanılır.



<table border="1">

    <tr>

        <th colspan="2">Başlık</th>

    </tr>

    <tr>

        <td rowspan="2">Yan Menü</td>

        <td>İçerik 1</td>

    </tr>

    <tr>

        <td>İçerik 2</td>

    </tr>

</table>

4. HTML Tablo Özellikleri

Tabloların görünümünü değiştirmek için aşağıdaki özellikler kullanılabilir:

border: Tablo kenarlıklarını belirler.
cellpadding: Hücre içi boşlukları belirler.
cellspacing: Hücreler arasındaki mesafeyi belirler.

5. Örnek Kullanım



<table border="1" cellpadding="10" cellspacing="5">

    <tr>

        <th>Ürün</th>

        <th>Fiyat</th>

        <th>Stok</th>

    </tr>

    <tr>

        <td>Laptop</td>

        <td>15.000 TL</td>

        <td>Var</td>

    </tr>

</table>

6. Tabloları CSS ile Şekillendirme

HTML tablolarını daha şık hale getirmek için CSS kullanılabilir. CSS eğitimleri ilerleyen HTML & CSS dersleri ile bağdaştırılacaktır.

7. Tablo Bölümleri

HTML tablolarında içeriği daha düzenli hale getirmek için <thead>, <tbody> ve <tfoot> etiketleri kullanılır.

7.1. Tablo Başlığı (thead)

Tablonun başlık kısmını belirtmek için <thead> etiketi kullanılır.



<table border="1">

    <thead>

        <tr>

            <th>Ürün</th>

            <th>Fiyat</th>

            <th>Stok Durumu</th>

        </tr>

    </thead>

</table>

7.2. Tablo Gövdesi (tbody)

Tablonun ana içeriğini barındıran kısım <tbody> etiketi içine yazılır.



<table border="1">

    <thead>

        <tr>

            <th>Ürün</th>

            <th>Fiyat</th>

            <th>Stok Durumu</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>Laptop</td>

            <td>15.000 TL</td>

            <td>Var</td>

        </tr>

        <tr>

            <td>Telefon</td>

            <td>10.000 TL</td>

            <td>Yok</td>

        </tr>

    </tbody>

</table>

7.3. Tablo Alt Bilgisi (tfoot)

Tablonun alt kısmına özet veya toplam değerler eklemek için <tfoot> etiketi kullanılır.



<table border="1">

    <thead>

        <tr>

            <th>Ürün</th>

            <th>Fiyat</th>

            <th>Stok Durumu</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>Laptop</td>

            <td>15.000 TL</td>

            <td>Var</td>

        </tr>

        <tr>

            <td>Telefon</td>

            <td>10.000 TL</td>

            <td>Yok</td>

        </tr>

    </tbody>

    <tfoot>

        <tr>

            <td colspan="2">Toplam Ürün Sayısı</td>

            <td>2</td>

        </tr>

    </tfoot>

</table>

8. Alternatif Satır Renkleri ile Tablo Okunabilirliğini Artırma

Tabloların okunabilirliğini artırmak için JavaScript veya CSS kullanılarak alternatif satır renkleri uygulanabilir. CSS ile şekillendirme dersleri ilerleyen HTML & CSS eğitimleriyle bağdaştırılacaktır.

9. Tablo Kullanım Senaryoları

Tablolar şu gibi durumlarda kullanılabilir:

Fiyat listeleri
Ürün katalogları
Veritabanı kayıtlarını listeleme
Raporlar ve istatistikler

10. HTML Tablo Özelleştirme

Tabloları özelleştirmek için çeşitli HTML özellikleri kullanılabilir. Örneğin, hücrelerin hizalanması ve genişliklerinin ayarlanması mümkündür.

10.1. Hücre İçeriğini Hizalama

Hücre içeriğini hizalamak için align ve valign (dikey hizalama) özellikleri kullanılabilir. Ancak, HTML5 ile bu özelliklerin kullanımı önerilmemektedir, bunun yerine CSS tercih edilmelidir.



<table border="1" width="50%">

    <tr>

        <th align="left">Sol Hizalama</th>

        <th align="center">Orta Hizalama</th>

        <th align="right">Sağ Hizalama</th>

    </tr>

    <tr>

        <td>Veri 1</td>

        <td>Veri 2</td>

        <td>Veri 3</td>

    </tr>

</table>

10.2. Tablo Genişliği ve Yüksekliği

Tablonun genel genişliğini ve satırların yüksekliklerini belirlemek için width ve height kullanılabilir.



<table border="1" width="100%" height="200px">

    <tr>

        <td>Burası bir hücredir</td>

    </tr>

</table>

11. Responsive (Duyarlı) Tablolar

Mobil uyumlu tablolar oluşturmak için <div class="table-container"> ile tabloyu sarmalayarak, taşma durumlarında kaydırma özelliği ekleyebiliriz.



<div style="overflow-x:auto;">

    <table border="1">

        <tr>

            <th>Başlık 1</th>

            <th>Başlık 2</th>

            <th>Başlık 3</th>

            <th>Başlık 4</th>

        </tr>

        <tr>

            <td>Veri 1</td>

            <td>Veri 2</td>

            <td>Veri 3</td>

            <td>Veri 4</td>

        </tr>

    </table>

</div>

12. HTML Tablo Kullanımında Dikkat Edilmesi Gerekenler

Tablolar kullanılırken şu noktalara dikkat edilmelidir:

Çok fazla tablo iç içe kullanmaktan kaçının.
Veri sunumu için tablo kullanın, sayfa düzeni için değil.
Responsive (mobil uyumlu) tasarım yaparak, tabloların küçük ekranlarda düzgün görüntülenmesini sağlayın.

Örnek 1: Basit Tablo

Ad	Soyad	Yaş
Ahmet	Yılmaz	25
Mehmet	Demir	30

Örnek 2: Hücre Birleştirme

Başlık
Yan Menü	İçerik 1
Yan Menü	İçerik 2

Örnek 3: Thead, Tbody, Tfoot Kullanımı

Ürün	Fiyat	Stok Durumu
Laptop	15.000 TL	Var
Telefon	10.000 TL	Yok
Toplam Ürün Sayısı		2

Örnek 4: Responsive (Duyarlı) Tablo

Başlık 1	Başlık 2	Başlık 3	Başlık 4
Veri 1	Veri 2	Veri 3	Veri 4

Son Söz

Bu derste, HTML tablolarının daha ileri düzeyde nasıl özelleştirileceğini, responsive hale getirileceğini ve dikkat edilmesi gereken noktaları öğrendik. İlerleyen derslerde, tabloların CSS ile nasıl daha şık hale getirileceğini öğreneceğiz.

Dynexplorer