Web sayfaları için tablo, stil kütüphane işlemlerini yapmak

Web sayfalarında bazen tablo kullanmamız gerekir.

Kullandığımız standart tablo yapısı çoğu kişinin hoşuna gitmeyeceği gibi kullanıcıların da görsel açıdan hoşlarına gitmeyecektir.Bu gibi bir durumda tablolar için stil kütüphane işlemlerini uygulamak için css kullanabiliriz.

CSS kullandığımızda tabloyu renklendirebilir , yazıları kalınlaştırabilir , yazı fontunu değiştirebilir , yazı boyutunu düzenleme gibi işlemleri kolaylıkla yapabiliriz.web sayfaları için tablo üzerinde stil kütüphane işlemlerini aşağıda detaylı inceleyebilirsiniz.

Aşağıda basit bir tablo örneği yapalım

<table>
    <thead>
        <tr>
            <td>No</td>
            <td>Okul Numarası</td>
            <td>Öğrenci Adı</td>
        </tr> 
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>0001</td>
            <td>Ahmet Aslan</td>
        </tr>    
        <tr>
            <td>2</td>
            <td>0002</td>
            <td>Ahmet Ceylan</td>
        </tr>    
    </tbody>
</table>

Yukarıdaki örnekde sadece düz tablo kullanılarak yapılmıştır.Hiçbir css kodu yazılmadığından kötü bir görünüm oluşacaktır.Yukarıdaki tabloyu css ile biraz düzenleyerek daha hoş bir hale getirelim.

Kod Yapısı

<table style="background: #d7fff6;">
    <thead>
        <tr>
            <td style="min-width: 50px;font-weight: bold;">No</td>
            <td style="min-width: 150px;font-weight: bold;">Okul Numarası</td>
            <td style="min-width: 150px;font-weight: bold;">Öğrenci Adı</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>0001</td>
            <td style="color: red;">Ahmet Aslan</td>
        </tr>
        <tr>
            <td>2</td>
            <td>0002</td>
            <td style="color: red;">Ahmet Ceylan</td>
        </tr>
    </tbody>
</table>

Yukarıdaki örneğin css stil kütüphanesi kullanılarak biraz daha iyileştirilmiş hali aşağıdaki şekilde görülmektedir.