CSS ile “tablo” Stilleme

HTML’de <table> etiketi ile tablolar oluşturabiliriz. Bu tabloların içerisinde satırlar <tr>, başlıklar <th> ve hücreler <td> etiketleri ile tanımlanır. CSS ile bu tablo öğelerinin görsel özelliklerini özelleştirebiliriz.

Genel hatlarıyla HTML’de bir tablonun temel yapısı aşağıdaki gibidir:

CSS kullanarak aşağıdaki özelliklerde stilize edebiliriz:

1. border: Tablo, satır veya hücrelere sınır (border) ekler.
2. border-collapse: İki seçeneği vardır; “separate” (ayrık) ve “collapse” (birleşik). “Collapse” kullanıldığında, bitişik hücrelerin sınırları birleştirilir.
3. border-spacing: “border-collapse: separate;” olarak ayarlandığında, hücreler arasındaki boşluğu belirtir.
4. width ve height: Tablonun, satırın veya hücrenin genişliğini ve yüksekliğini belirtir.
5. padding: Hücre içeriğinin etrafındaki boşluğu ayarlar.
6. text-align: Hücre içeriğinin yatay hizalamasını belirtir (ör. “left”, “right”, “center”).
7. vertical-align: Hücre içeriğinin dikey hizalamasını belirtir (ör. “top”, “middle”, “bottom”).
8. background-color: Tablo, satır veya hücrenin arkaplan rengini belirtir.
9. color: Tablo metni rengini belirler.
10. table-layout: Tablonun düzenini belirler. “Fixed” değeri ile tablonun genişliği sabitlenir ve hücre genişlikleri ilk satıra göre belirlenir.
11. caption-side: Tablo başlığının (“caption”) konumunu belirtir (ör. “top”, “bottom”).
12. empty-cells: İçeriği olmayan hücrelerin görünürlüğünü kontrol eder (“show” veya “hide”).
13. margin: Tablonun çevresindeki dış boşluğu ayarlar.
14. font-family, font-size, font-weight: Tablo metni tipi, boyutu ve kalınlığı üzerinde değişiklik yapar.

Tabloları stilize ederken dikkat etmemiz gereken bazı önemli noktalar bulunmaktadır. İlk olarak, tablo hücreleri arasındaki çift border problemi ile sıkça karşılaşırız. Bu yüzden border-collapse: collapse; özelliğini kullanarak hücreler arası sınırları birleştiririz. Bu, daha temiz ve profesyonel bir görünüm elde etmemize yardımcı olur.

❗ Eğer sadece tablonun etrafında bir çizgi oluşturmak istenirse yalnızca <table> için border özelliği kullanılmalıdır.

Hücrelerin içerikleri arasında boşluk bırakmak için padding özelliğini kullanırız. Bu, içeriklerin direkt hücre sınırlarına yapışık olmasını engeller ve okunabilirliği artırır.

Tablo başlıklarını vurgulamak için <th> etiketlerine genellikle font-weight: bold; özelliğini uygularız. Bu, kullanıcının dikkatini çeker ve bilginin önemini vurgular.

Arka plan renklerini kullanarak tablonun belirli bölümlerini vurgulayabiliriz. Özellikle zebra stilinde satırlara farklı arka plan renkleri vererek okunabilirliği artırabiliriz.

Son olarak, tablolar genellikle çok fazla bilgi içerir. Bu nedenle, metin hizalamalarını dikkatlice seçmeli ve içerikleri dengeli bir şekilde sunmalıyız. Örneğin, sayısal veriler genellikle sağa hizalanırken, metin içerikleri sola veya ortaya hizalanabilir.

Bu bilgiler, tablo stilize ederken bilmemiz ve dikkat etmemiz gereken temel noktalardır. İdeal bir tablo tasarımı için bu önerilere uyarak kullanıcı deneyimini artırabiliriz. Örnek olarak aşağıdaki tabloyu inceleyebilirsiniz:

See the Pen CSS Tablo by 1kodum (@1kodum) on CodePen.