HTML'de Tablolar

by trustix


Eklenme Tarihi : 16 Aralık 2020 20:43 Views:     425



Web sayfalarından resim, fotoğraf, metin, video, ses gibi birçok farklı türden içerik bulunur. Bazı durumlarda ise bu içeriklerin daha anlaşılır olması için belli satırlar ve sütunlar aracılığı ile kullanıcıya sunulması gerekir. Bir içerik listesi, ürün listeleri, başlıklara ilişkin ayrıntılar ya da raporlar bu içeriklerden olabilir. Söz konusu durumda  HTML bize satır ve sütunlardan oluşan bir tablo yapısı sunar.

HTML'de Tablo Oluşturma

HTML'de tablolar <table> </table>  etiketleri içine satır oluşturmak için <tr> ve sütun oluşturmak için <td> etiketlerini kullanmak için mümkündür. Ayrıca <th> etiketleri ile bir veya daha fazla sütuna başlık ataması yapılabilir.

HTML ile Tablo Örneği:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML - Tablolar </title>


</head>
<body>

    <!-- 
        Haftanın ilk üç günündeki ilk ders saatlerini içeren
        bir ders programını yapmak amacı
        ile th etiketleri ile başlık niteliğinde
        günleri
        ve daha sonra tr etiketleri ile satırlar
        td etiketleri ile de sütunları oluşturuyoruz.
    -->

    <table>
        <tr>
            <th>Pazartesi</th>
            <th>Salı</th>
            <th>Çarşamba</th>

        </tr>
        <tr>
            <td>Matematik</td>
            <td>Fizik</td>
            <td>Biyoloji</td>
        </tr>
        <tr>
            <td>Matematik</td>
            <td>Fizik</td>
            <td>Biyoloji</td>
        </tr>
        <tr></tr>
    </table>
    
</body>
</html>

 

 

 

Tablo yapılarında HTML tarafında varsayılan olarak bir kenarlık değeri ya da çerçeve yoktur. Bu çerçeve border özniteliği ya da CSS kodları ile eklenebilir. Burada dahili CSS ile biz de kenarlık ekleyeceğiz.

 

 

<style>
    /* 1px kalınlığında kenarlık vermek için gerekli CSS kodlarını yazıyoruz. */
    table, th, td {
        border: 1px solid green
    }

    /* Tablo içi boşlukları ayarlamak için iç ve dış boşluk miktarlarını belirtiyoruz. */
    th, td {
        padding: 15px;
        margin: 5px;
    }
</style>

 

 

HTML tablolarında sütun başlıklarını belirtmek için kullanılan <th> etiketlerinin içerisindeki metinler varsayılan olarak ortada bulunur. İsteğe bağlı olarak metin CSS ile sağa veya sola hizalanabilir. Ama varsayılan hali genelde daha estetiktir.

 

HTML Tablolarından Satır ve Sütunları Birleştirme

Bazı durumlarda bir tablodaki satırlar ya da sütunlar birleştirilebilir. Bu durumda colspan ve rowspan öznitelikleri kullanılabilir

HTML'de Sütunları Birleştirme

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML - Tablolar </title>


<style>
    /* 1px kalınlığında kenarlık vermek için gerekli CSS kodlarını yazıyoruz. */
    table, th, td {
        border: 1px solid green
    }

    /* Tablo içi boşlukları ayarlamak için iç ve dış boşluk miktarlarını belirtiyoruz. */
    th, td {
        padding: 15px;
        margin: 5px;
    }
</style>

</head>
<body>

    <!-- 
        Bir kişiye ait birden fazla iletişim numarasının
        istendiği ya da listelendiği durumlarda
        her iki sütunu tek başlık altında birleştiren
        yapıyı kurmak için th etiketini
        kullanırken sütun birleştirme amacı ile
        kullanıla colspan özniteliğini kullanıyoruz.
        colspan içerisine girilen değer 
        birleştirilecek sütun sayısıdır.
    -->

    <table>
        <tr>
            <th>Ad</th>
            <th colspan="2">İletişim Numarası</th>
        </tr>
        <tr>
            <td>Kerem</td>
            <td>000000000000</td>
            <td>00000000000</td>
        </tr>
    </table>
    
</body>
</html>

 

 

HTML'de Satırları Birleştirme

 

<body>

    <!-- 
        Yukarıdaki yapının bir benzeri
        sadece tablo farklı görünecek şekilde
        satırları birleştirmek
        için kullanılabilir.
        Satır birleştirmede 
        rowspan özniteliği kullanılır.
    -->

    <table>
        <tr>
            <th>Ad:</th>
            <td>Kerem</td>
        </tr>
        <tr>
            <th rowspan="2">İletişim Numarası</th>
            <td>000000000000</td>
        </tr>
        <tr>
            <td>0000000000</td>
        </tr>
    </table>
    
</body>

 

 

HTML Tablolarına Başlık Ekleme

Tablolarda başlık için kullanılan etiket    <caption> etiketidir. Bu etiket içerisine yazılacak olan metin tablo başlığı olacaktır.

 

 

<body>

    <!-- 
        Tablo başlığını belirtmek için caption 
        etiketi tablonun en üst kısmına yazılır.
    -->

    <table>
        <caption>İletişim Bilgileri</caption>
        <tr>
            <th>Ad:</th>
            <td>Kerem</td>
        </tr>
        <tr>
            <th rowspan="2">İletişim Numarası</th>
            <td>000000000000</td>
        </tr>
        <tr>
            <td>0000000000</td>
        </tr>
    </table>
    
</body>

 

HTML Tablolarında Üst Bilgi Gövde ve Alt Bilgi Bölümleri Oluşturma

Başlıklar dışında HTML tablolarında <thead> etiketi ile üst bilgi belirtilerbilir. Benzer şekilde gövde içeriği için <tbody> ve alt bilgi yani footer bölümü için <tfoot> etiketi kullanılır.

Örneğin:

 

 


    <!-- 
        Tablolar üç bölüme ayrılarak
        oluşturulabilir. Bunlar tablonun ilk satırının
        bulunduğu head yani üst bilgiler bölümü
        ikincisi tablonun gövdesi dediğimi ana bölümü
        üçüncüsü ise tablonun alt metin ya da footer bölümü

        üst bilgi için thead
        tablo gövdesi için tbody
        ve alt metin yani footer için tfoot
        etiketleri buradaki örnekte olduğu gibi kullanılabilir.
    -->

    <table>
        <thead>
            <tr>
                <th>Ürün</th>
                <th>Fiyat</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Ayakkabı</td>
                <td>520 TL</td>
            </tr>
            <tr>
                <td>Jean</td>
                <td>290 TL</td>
            </tr>        
        </tbody>
        <tfoot>
            <tr>
                <th>Toplam</th>
                <td>810 TL</td>
            </tr>
        </tfoot>
    </table>

 

HTML'de tablo nasıl oluşturulur, tablo nasıl biçimlendirilir, üst bilgi, gövde ve alt bilgi bölümü nasıl oluşturulur ve tablo hücreleri nasıl birleştirilir gibi sorulara cevap aramaya çalıştık.

 

Herkese İyi Kodlamalar.

 





0

Yorum Formu

vikikod.com    © 2019