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

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">
  <div>
    <div class="th">Başlık 1</div>
    <div class="th">Başlık 2</div>
  </div>

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

  <div>
    <div>Satır 1, Sütun 1</div>
    <div>Satır 1, Sütun 2</div>
  </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.

Yukarıda ki tablo çalışmasının kodlarını aşağıdan indirebilirsiniz.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

This site uses Akismet to reduce spam. Learn how your comment data is processed.