` içine alın ve `overflow-x: auto;` stilini uygulayın.
*
Veri Gizleme: Küçük ekranlarda bazı sütunları gizlemek için CSS medya sorgularını kullanın.
css
@media screen and (max-width: 600px) {
td:nth-child(3), th:nth-child(3) {
display: none; /* 3. sütunu gizler */
}
}
*
Tabloyu Liste Olarak Görüntüleme: Küçük ekranlarda tabloyu bir liste gibi görüntülemek için CSS kullanarak tablo yapısını değiştirebilirsiniz.
🚀 İpuçları ve Püf Noktaları
*
Anlamlı Başlıklar Kullanın: Sütun başlıklarınızın açık ve anlaşılır olduğundan emin olun.
*
Veri Türlerini Tutarlı Tutun: Her sütunda aynı türden verileri kullanın (örneğin, bir sütunda sadece sayılar veya sadece metin).
*
Renkleri Dikkatli Kullanın: Renkleri vurgu yapmak veya gruplama yapmak için kullanın, ancak aşırıya kaçmaktan kaçının.
*
Erişilebilirliği Unutmayın: Tablolarınızın ekran okuyucular tarafından okunabilir olduğundan emin olun. Bunun için `
` etiketiyle tabloya bir başlık ekleyebilir ve `aria-label` gibi özelliklerle erişilebilirliği artırabilirsiniz.
- 🍎 `` Etiketi: Tablonun ne hakkında olduğunu açıklayan bir başlık ekleyin.
- 🍏 `aria-label` Özelliği: Ekran okuyucular için ek bilgiler sağlayın.
Tablolar, verileri etkili bir şekilde sunmanın güçlü bir yoludur. Bu ipuçlarını ve teknikleri kullanarak, hem işlevsel hem de görsel olarak çekici tablolar oluşturabilirsiniz.
