SUNIPEYK

[ Okuma süresi tahmini 2 dakikadır ]

Verileri yazılarınızda table/ tablo ile göstermek çok daha anlaşılır olmalarını sağlayacaktır. Belki son yıllarda grafik ile gösterim arttı. Evet bu şekilde gösterim daha güzel ve cazip görünüyor. Yine de ihtiyaç duyduğumuzda tablo yapmak oldukça kolay.

Table/ Tablo Kodları

Aşağıda temel olarak bir table/ tablo kodlarını görebilirsiniz. Yapmanız gereken verilerinize göre bölümleri arttırmak veya azaltmak ve içerikleri eklemek.

Örnek

 <table>
 <thead>
 <tr>
 <th></th>
 <th></th>
 <th></th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td></td>
 <td></td>
 <td></td>
 </tr>
 </tbody>
 </table> 

Açıklamalar

thead kısmı verilerimizin başlıklarını içeriyor.
tbody kısmında verilerimizi giriyoruz. Her bölümün başındaki ilk td sol sütunu veriyor. Sonra sağa doğru devam ediliyor.
Her satırı tr ile başlatıp bitiriyoruz.

Responsive Table

Elbette tablolarımızın da responsive olmasını isteriz. Mobil cihaz ve telefon boyutlarına göre kendisini adapte etmesi gerekir.
Tablolar oldukça responsive uyumlu olmalarına rağmen biraz CSS ile müdahele etmekte fayda var. CSS ile tablonuzun renk,çizgi ve benzeri özellikleri ile de kolayca oynayabilirsiniz.

Örnek

Sitede kullandığımız CSS kodlarının örneğini aşağıda bulabilirsiniz;

table{box-sizing:border-box;width:100%;margin:0;padding:0;border-collapse:collapse;border-spacing:0}
  table tr{padding:5px}
  table th, table td{border-top:1px solid #999;padding:5px;text-align:center}
  table th {border-bottom:1px solid #999;letter-spacing:1px}
  table td{text-align:center;border:1px solid #999}

Siz kendi ihtiyaç ve zevkinize göre istediğiniz gibi değiştirip kullanabilirsiniz.