Bu makale, CSS kullanarak farklı ve yaratıcı tablo tasarımlarının nasıl oluşturulabileceğini ele alıyor Tablolar, web siteleri ve bloglar gibi pek çok platformda kullanılan bir tasarım öğesi olduğundan, sıradan ve basit tablo tasarımlarının dışına çıkılarak daha modern ve özelleştirilmiş tasarımlar yapmak oldukça önemlidir Bu açıdan, CSS kullanarak yaratıcı tablo tasarımları yapmak mümkündür Bu tasarımlarda, grid kullanarak tabloların sütun ve satırlarını ayarlamak mümkündür Ek olarak, responsive tasarımlar yapmak için scrollable tablolar ve sütun gizleme gibi özellikleri de kullanmak mümkündür Makalede, modern tablo tasarımı yapma ve grid tasarımıile tablo oluşturma gibi konular ele alınmıştır
CSS, web tasarım dünyasında oldukça önemli bir yere sahip. CSS kullanarak yapılabileceklerden biri de yaratıcı tablo tasarımları oluşturmak. Bu makalemizde, CSS kullanarak yaratıcı tablo tasarımlarının nasıl yapılabileceğine ve birkaç örnek hakkında bilgilere yer vereceğiz.
Tablolar, web siteleri ve bloglar gibi birçok farklı platformda tercih edilen bir tasarım öğesi. Ancak sıradan, basit tablo tasarımlarından sıkıldıysanız, CSS ile yaratıcı tasarımlar yapabilirsiniz. Örneğin, modern tablo tasarımı yaparak farklı stiller yaratabilirsiniz. Grid de kullanarak tabloları kolayca oluşturabilir ve sütun/satır ayarlamaları yaparak tasarımda özelleştirme yapabilirsiniz.
Bir diğer önemli özellik ise responsive tasarımdır. Mobil ve tablet gibi farklı cihazlara uyumlu hale getirmek, responsive özellikleri kullanarak mümkündür. Scrollable tablolar oluşturarak mobil cihazlarda daha okunaklı hale getirebilir veya sütunlara gizleme işlevi ekleyerek tablonun daha az yer kaplamasını sağlayabilirsiniz.
1. Modern Tablo Tasarımı
CSS kullanarak modern tablo tasarımları oldukça yaratıcı ve şık bir görünüme sahip olabilirler. Bu tasarımlarda farklı stiller kullanarak tablolarınızı tasarlayabilirsiniz. Örneğin, border-radius özelliğini kullanarak yuvarlak köşeler oluşturabilirsiniz ya da border-collapse özelliğini kullanarak sınırları birleştirebilirsiniz.
Ayrıca, background-color ve color özelliklerini de kullanarak tablolarınızın arka plan ve metin renklerini değiştirebilirsiniz. Tablolarınızın satır ve sütunları için ayrı ayrı renkler de belirleyebilirsiniz. Bu şekilde tablolarınızı daha modern görünümlü hale getirebilirsiniz.
Tablolarınızda farklı yazı tipleri, boyutları ve stilleri kullanabilirsiniz. Böylece, tablolarınızı daha çekici ve estetik hale getirebilirsiniz. Bunun yanı sıra, tablolarınızda resimler veya simgeler kullanarak daha fazla detay ekleyebilirsiniz.
2. Grid Tasarımı ile Tablo Oluşturma
CSS kullanarak tablo tasarımları yapmak oldukça kolaydır. Grid özelliği de bu konuda bize büyük bir yardımcıdır. Grid kullanarak tablolar oluşturabilir ve farklı stiller elde edebilirsiniz.
Grid ile tablo tasarımı yaparken sütun ve satır ayarlamalarını yapabilirsiniz. Bunun için grid-template-columns ve grid-template-rows özelliklerini kullanabilirsiniz. Hatta daha gelişmiş bir yöntem olan grid-template-areas özelliği ile hücrelerin konumlarını ve boyutlarını tamamen kontrol edebilirsiniz.
| Ad | Soyad | Yaş |
|---|---|---|
| Ali | Yılmaz | 30 |
| Ayşe | Kara | 25 |
Ayrıca distanct ve row-gap gibi özellikler ile de hücreler arasında boşluklar oluşturabilirsiniz. Bunların yanı sıra, spanning ve offset özellikleri ile hücreleri birleştirebilir ve öteleyebilirsiniz. Bu özellikler, tablolarınızı daha yaratıcı hale getirebileceğiniz birçok seçenek sunmaktadır.
İşte size bir örnek tablo tasarımı:
| İsim | Yaş | Eğitim Durumu | İş | |
|---|---|---|---|---|
| İlkokul | Lise | |||
| Ali | 30 | X | Mühendis | |
| Ayşe | 25 | X | Öğretmen | |
Tabloların responsive tasarımlarını yapmak da oldukça önemlidir. Mobil cihazlarda tabloların okunaklılığından emin olmak için scrollable tablolar ve sütun gizleme gibi özellikler kullanılabilir. Bu özellikler sayesinde tablolarınız her cihazda okunabilir hale gelecektir.
2.1 Satır ve Sütun Ayarlamaları
Grid tasarımı sayesinde tabloların sütun ve satırlarını belirlemek oldukça kolay hale gelir. Grid özelliklerini kullanarak istediğimiz sütun ve satır sayısını oluşturabiliriz. Satırları oluşturmak için 'grid-template-rows' özelliği kullanılır. Örneğin, 3 satırlı bir tablo için;
```css.grid-container { display: grid; grid-template-rows: auto auto auto;}```
Sütunları oluşturmak için 'grid-template-columns' özelliği kullanılır. Örneğin, 3 sütunlu bir tablo için;
```css.grid-container { display: grid; grid-template-columns: auto auto auto;}```
Satır ve sütunların genişliklerini belirlemek için 'grid-template-rows' ve 'grid-template-columns' özellikleri ile piksel veya yüzdelik değerler kullanılabilir.
```css.grid-container { display: grid; grid-template-columns: 100px 200px 100px; grid-template-rows: 50px 100px 50px;}```
Tablolarımızın satır ve sütunlarını istediğimiz şekilde ayarlamak için 'grid-template-areas' özelliği kullanılabilir. Bu özellik, birbiriyle aynı boyutta hücreleri bir araya getirerek belirli bir düzene sokar. Örneğin, 3 satır ve 3 sütundan oluşan bir tablo için;
```css.grid-container { display: grid; grid-template-areas: "header header header" "content content sidebar" "footer footer footer"; grid-template-rows: 100px 400px 100px; grid-template-columns: 1fr 2fr 1fr;}```
Grid tasarımı ile oluşturulan tablolar hem kolaylıkla özelleştirilebilir hem de sütun ve satırların ayarlanması oldukça basit hale gelir. Grid tasarımı sayesinde fonksiyonel ve modern tasarımlara sahip tablolar oluşturmak çok daha kolay hale gelir.
2.1.1 Grid Template Areas
CSS kullanarak tablo tasarımlarını çeşitlendirmek mümkündür. Grid Template Areas özelliği de bu tasarımı yapmak için oldukça etkili bir araçtır. Grid Template Areas, satır ve sütunları belirleyen bir özelliktir. Bu özellik, açıklaması nedeniyle oldukça kolay anlaşılabilir. Çünkü tasarımcılar için, şekil tasarlama işlemi kolaylaşır.
Grid Template Areas özelliği, birkaç avantaj sunar:
- Birbiriyle eşit ya da farklı büyüklüğe sahip hücreler yapabilirsiniz.
- Daha düzenli bir tasarım oluşturabilirsiniz.
- Satır ve sütunlardaki hücrelerin gösterimi daha anlaşılır hale getirilebilir.
- Bir hücrenin esnekliği, bir bölmenin özelliği gibi değiştirilebilir.
Bu özellik özellikle web tasarımında oldukça popülerdir. Çünkü Grid Template Areas özelliğini kullanarak göz alıcı, yaratıcı ve modern tasarımlar yapmak oldukça kolaydır. Bu nedenle, web tasarımcıları için Grid Template Areas özelliğinin öğrenilmesi oldukça önemlidir.
2.1.2 Grid Template Columns ve Rows
Grid tasarımı, CSS ile sayfanın düzenini oluşturmak için kullanılan bir tekniktir. Grid template columns ve rows özellikleri, tasarımın yapısını belirleyen iki önemli özelliktir.
Grid template columns, tablonun sütun yapısını belirlemek için kullanılır. Örneğin, "grid-template-columns: 1fr 2fr;" kodu ile ilk sütunun genişliği birim fr olarak 1 olarak belirlenir ve ikinci sütunun genişliği ise 2 olarak belirlenir. Bu özellik, sütunların nasıl sığacağını ve ne kadar yer kaplayacağını belirler.
Grid template rows ise aynı şekilde, satır yapısını belirlemek için kullanılır. Örneğin, "grid-template-rows: 1fr 2fr;" kodu ile ilk satırın yüksekliği birim fr olarak 1 olarak belirlenir ve ikinci satırın yüksekliği ise 2 olarak belirlenir. Bu özellik, satırların nasıl sığacağını ve ne kadar yer kaplayacağını belirler.
Bu özellikler, bir tablonun düzenini belirlerken birbirleriyle birlikte kullanılır. Grid template rows ve columns özellikleri sayesinde, tablonun her bir hücresinin boyutu ve yerleşimi tamamen kontrol edilebilir.
2.2 Spanning ve Offset
Grid özellikleri sayesinde tablolardaki hücreler arasında birleştirme ve öteleme işlemi yapabiliriz. Bu işlemler sayesinde tabloları daha düzenli bir şekilde tasarlayabiliriz. Grid column ve row özellikleri kullanılarak hücreler birleştirilebilir ya da ötelenebilir.
Hücre birleştirme işlemi için Grid Column ve Row özellikleri kullanılabilir. Grid Column özelliği ile sütunları birleştirirken Grid Row özelliği ile satırları birleştirebiliriz. Hücreleri birleştirme işlemi yaparken dikkat edilmesi gereken nokta, birleştirilen hücrelerin boyutlarının eşit olmasıdır. Aksi takdirde tablo tasarımı hatalı görünecektir.
Hücre öteleme işlemi yapmak için Grid Column veya Row özellikleri kullanılabilir. Hücre öteleme işlemi yaparken hücre içeriğini kaybetmememiz gerektiğini unutmamız gerekiyor. Grid Column ve Row özellikleri kullanılarak hücrelerin ötelenmesi için grid-row-start, grid-row-end, grid-column-start, grid-column-end belirleyicileri kullanılabilir. Bu belirleyiciler sayesinde hücrelerin konumlarına göre öteleme işlemi yapabilirsiniz.
2.2.1 Grid Column ve Row
Grid column ve row özellikleri, tablolardaki hücreleri birleştirerek daha büyük bir hücre oluşturma ve öteleme özellikleri sunar. Bu özellikler sayesinde tabloları daha estetik bir tasarıma sahip hale getirmek ve kullanıcıların ihtiyaçlarına göre özelleştirmek mümkündür.
Grid column ve row özelliklerini kullanarak aynı sütun ya da satırdaki hücreleri birleştirebilir ve daha büyük bir hücre oluşturabilirsiniz. Böylece tablonuz daha düzenli bir görüntü elde eder.
| Birinci Hücre | İkinci Hücre | Üçüncü Hücre |
| Birleşik Hücre | ||
| Dördüncü Hücre | Birleşik Hücre | |
| Beşinci Hücre | ||
Aynı zamanda, grid column ve row özellikleri sayesinde hücreleri öteleyebilirsiniz. Ötelemek istediğiniz hücrelere grid-column ya da grid-row özelliklerini ekleyerek farklı bir hücre konfigürasyonu sağlayabilirsiniz.
| Birinci Hücre | İkinci Hücre | Üçüncü Hücre |
| İkinci ve Üçüncü Hücre Birleşik | Dördüncü Hücre | |
| Beşinci Hücre | Altıncı Hücre | |
Grid column ve row özellikleri sayesinde hücreleri birleştirerek ve öteleyerek tablolarınıza daha dinamik bir tasarım ekleyebilirsiniz. Bununla birlikte, responsive tasarımlar yaparken hücreleri ötelemede ve birleştirmede dikkatli olmanız gerekmektedir.
3. Responsive Tablo Tasarımları
Tabloların responsive tasarımlarının önemi günümüzde giderek artmaktadır. Mobil cihazların geniş kullanımı nedeniyle, tabloların mobil ve tablet cihazlarda uyumlu hale getirilmesi çok önemlidir. Bu, tabloların kullanışlılığını artırmakta ve kullanıcıların cihazlarında daha iyi bir görüntüleme deneyimi yaşamalarına olanak sağlamaktadır.
Tabloların mobil ve tablet cihazlarda düzenlenmesi için birkaç farklı yöntem bulunmaktadır. Bunlardan biri, tablolara kaydırma işlevi eklemektir. Bu sayede kullanıcılar, tablonun dışına taşan verileri görebilmek için tabloyu yatay veya dikey olarak kaydırabilirler. Bu yöntem, çok sayıda veri içeren tablolar için oldukça işlevseldir.
Bir diğer yöntem, sütun gizleme işlevi eklemektir. Bu sayede, mobil cihazların küçük ekranlarına sığmayan sütunlar gizlenebilir ve kullanıcının cihazında daha az yer kaplaması sağlanabilir. Sütun gizleme işlevi, tabloların daha okunaklı hale getirilmesine de olanak sağlayabilir.
Responsive tablo tasarımları, modern web tasarımının en önemli unsurlarından biridir. Mobil cihazlarda rahatlıkla kullanılabilen ve okunabilen tablolar, kullanıcı deneyimini artırmakta ve web sitelerinin daha işlevsel hale gelmesine katkıda bulunmaktadır.
3.1 Scrollable Tablolar
Responsive tasarımların bir diğer önemli özelliği de mobil cihazlarda okunaklı hale getirilmesidir. Tablolarda kaydırma işlevi ekleyerek, sütunlar sığmadığı zaman kaydırma yaparak verilerin okunmasını kolaylaştırabiliriz.
Bu işlem için overflow: auto özelliği kullanılabilir. Bu özellik sütunlar sığmadığı zaman kendi içerisinde kaydırmaya izin verir. Aşağıdaki örnek kod bloğunda, bir tablo içerisindeki verilerin kaydırılabilir hale getirilmesini sağlayan CSS kodu yer almaktadır:
table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 500px; /* minimum genişlik */ overflow-x: auto; /* yatay kaydırma */ -webkit-overflow-scrolling: touch; /* IOS cihazlar için */}Bu kod bloğu, mobil cihazlarda sütunların sığmayacağı durumlarda kaydırma işlevi ekleyerek, tablonun okunaklığını arttıracaktır.
Bu yöntem, tabloların sığdığı ama sütunların dar olduğu durumlarda da kullanılabilir. Ayrıca, IOS cihazlarda da bu yöntemle daha iyi bir kullanıcı deneyimi sağlanabilir.
Bu özellik, responsive tasarımlarda önemli bir yer tutmaktadır. Mobil cihazlarda verilerin okunaklı hale getirilmesi, kullanıcıların web sayfasını daha rahat bir şekilde kullanmasını sağlar ve web sayfasının kullanışlılığını arttırır.
3.2 Sütun Gizleme
Mobil cihazlarda tablolarda sütunların fazlalığından dolayı içeriklerin tamamının görüntülenmesi zor olabilir. Bu nedenle, sütunların gizlenebilir olması mobil cihaz kullanıcıları için oldukça önemlidir. Bu işlevi eklemek, tabloların daha az yer kaplamasını sağlar ve okunabilirliği artırır.
Sütun gizleme işlevi, CSS medya sorguları kullanılarak kolayca oluşturulabilir. Böylece, belirli bir ekran boyutunun altında sütunlar gizlenebilir ve daha küçük ekranlarda tablo daha okunaklı hale gelir. Bunun yanı sıra, gizlenen sütunlar için bir açılır menü de eklenerek kullanıcılar istedikleri sütunu açabilirler.
| Kullanıcı | Tarih | Fiyat | |
|---|---|---|---|
| John Doe | john@gmail.com | 12/05/2022 | $50 |
| Jane Doe | jane@gmail.com | 10/03/2022 | $70 |
Yukarıdaki örnekte, sütunlar mail ve tarih düşüncesi gereksiz olabilir. Bu durumda, sütunlar gizlenebilir ve kullanıcılar sadece kullanıcı adı ve fiyat sütunlarını görüntüleyebilirler.
Bunun yanı sıra, sütunların gizlenmesi işlevi, tablodaki verilerin daha özetlenmiş bir şekilde sunulmasına ve mobil cihaz kullanıcılarının daha hızlı bir şekilde istediği bilgiyi bulmasına yardımcı olur. Bu özellik, web sitenizin mobil kullanıcı dostu olmasını sağlamak için oldukça önemlidir.