CSS İle Div Kullanarak Tablo Yapımı

Bildiğiniz gibi günümüz web tasarımlarında listeleme işlemleri tablo(<table>…</table>) nesnesi ile değil, <div>…</div> nesnesi ile gerçekleştirilmektedir.Bunun sebebi, hem Google arama motoru açısından daha kaliteli bir site izlenimi yaratmak hem de site hızını arttırmak gibi faktörler söyleyebiliriz.

Tabi benim gibi işin yazılım boyutuna sevdalı olup tasarım boyutundan yoksunsanız eğer “divler ile nasıl tablo yapılır?” sorusunu sorabilirsiniz.Ben bu soru neticesinde internette kısa bir araştırma sonucu güzel ve her zaman kullanılabilir bir yapıyla karşılaştım.

Hiç uzatmadan olayın teknik boyutuna göz atalım.
Div nesnesiyle oluşturacağımız tablonun HTML yapısı aşağıdaki şekilde olacaktır.

<div class="table"> // Bu div <table> tagı ile aynı işlevi görüyor
    <div> // Bu div <tr> tagı ile aynı işlevi görüyor
        <div class="th">Başlık 1</div> // Bu div <th> tagı ile aynı işlevi görüyor
        <div class="th">Başlık 2</div> // Bu div <th> tagı ile aynı işlevi görüyor
    </div>
    <div> // Bu div <tr> tagı ile aynı işlevi görüyor
        <div>Satır 1, Sütun 1</div> // Bu div <td> tagı ile aynı işlevi görüyor
        <div>Satır 1, Sütun 2</div> // Bu div <td> tagı ile aynı işlevi görüyor
    </div>
    <div> // Bu div <tr> tagı ile aynı işlevi görüyor
        <div>Satır 1, Sütun 1</div> // Bu div <td> tagı ile aynı işlevi görüyor
        <div>Satır 1, Sütun 2</div> // Bu div <td> tagı ile aynı işlevi görüyor
    </div>
</div>  

Gördüğünüz gibi mantıksal olarakta yukarıda izah edildiği gibi divlerle tablomuzu yapısal olarak hazırlamış olduk.Şimdide “table” isimli CSS Class’ımızı tanımlayalım.

    .table {
        width: 100%;
        display: table;
    }
        .table div {
            display: table-row;
        }
            .table div div {
                display: table-cell;
                text-align: left;
            }
                .table div div.th {
                    font-weight: bold;
                    text-align: center;
                }

İşte bu kadar…
CSS eşliğinde div nesnesiyle oluşturduğumuz tablonun görsel hali aşağıdaki gibi olacaktır.

Ufak tefek değişikliklerle kendi zevkinize uygun bir şekle getirebilirsiniz 🙂
İyi çalışmalar…