reklam

Sadece CSS Kullanarak Tablo Nasıl Yapılır?


CSS İle Tablo Oluşturma Hakkında Detaylı Bilgiler Verilmiştir


Html5 teknolojisinin gelmesiyle birlikte günümüzde Web programlama daha da kolay bir hale gelmiştir. Öyle ki çok karışık kodlamalar bile artık daha kısa ve öz yazılabiliyor. Dolayısıyla alışılagelmiş bazı html taglarını unutmak ve yeni özellikleri adımız gibi bilmemiz gerekiyor.

Bu yazımızda sizlere <table>…</table> ile oluşturulan tabloların yerine daha avantajlı ve seo dostu %100 CSS ile kodlanmış tabloların nasıl yapıldığını ve nerelerde kullanabileceğimizi gösterecez.
Öncelikle temel olarak kullanacağımız html yapısı şu şekilde olmalıdır. Sizler bu yapıyı çok daha özelleştirerek manşet slider, özel yazı kutuları ve bunu yanında klasik olarak ofis tarzı tablolar oluşturabilirsiniz.

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

Üstteki html yapısına bakarsanız hiyerarşik düzen içerisinde div tagları css ile birlikte <table> kodunun görevini üstlenmiştir. Şimdide en önemli kısım olan ve html yapımızda ki div etiketlerimize tablo özelliği verecek olan Css kodlarını inceleyelim.

/* display: table; kodu div tagımıza <table> etiketi özelliğini verecek */
.table {
 width: 100%;
 display: table;
}
/* display: table-row; kodu div tagımıza <tr> etiketi özelliğini verecek */
.table div {
 display: table-row;
}
/* display: table-cell; kodu div tagımıza <td> etiketi özelliğini verecek */
.table div div {
 display: table-cell;
 text-align: left;
}
/* altta ki kod divimize <th> etiketi özelliğini verecek */
.table div div.th {
 font-weight: bold;
 text-align: center;
}

Yukarıda ki kodlama ile basit tablolar oluşturabilirsiniz ancak ileri düzey tablolar için biraz emek vererek ve kendinize göre düzenlemeler yaparak ortaya güzel birşeyler çıkartabilirsiniz.

css-tablo

Yukarıda ki tablo çalışmasının kodlarını İndirmek için Tıkla.

(Ses CD'si Nasıl Yazılır?)(Android Telefon Usb Bağlanmıyor Kesin Çözümü!)

Yazı hakkında görüşlerinizi belirtmek istermisiniz?