Web'de Tablo Tasarım Kalıpları

Tablolar, büyük miktarda veriyi satırlar ve sütunlarda görüntülemek için bir tasarım modelidir ve kategorik nesneler üzerinde karşılaştırmalı analiz yapmak için onları verimli kılar. ^2. yüzyıldan itibaren masalar bu amaçla kullanılmaya başlanmış ve dünya dijitalleşmeye başlayınca masalar da bizimle birlikte ortaya çıkmıştır.

Web'in verilerin tablo biçiminde görüntülenmesini desteklemesi kaçınılmazdı. HTML tabloları, tablo verilerini anlamsal ve yapısal olarak uygun bir şekilde sunar. Ancak, HTML tablolarındaki varsayılan stiller, şimdiye kadar gördüğünüz estetik açıdan en hoş şeyler değildir. İstenilen görsel tasarıma bağlı olarak, bu tabloları güzelleştirmek için CSS cephesinde biraz çaba gerekiyordu. On yıl önce, Smashing Magazine'de "En İyi 10 CSS Tablo Tasarımı" ile bir makale yayınlandı ve bu güne kadar hala çok fazla trafik almaya devam ediyor.

Web, son on yılda çok gelişti ve sitenizi veya uygulamanızı görüntülendiği görünüme uyarlamak her zamankinden daha uygun. Bununla birlikte, taviz vermeyen, üzerinde düşünülmüş tasarım seçimleri yapmaya devam etmeliyiz. ulaşılabilirlik. Tablolar yakın zamanda gözden düşmeyeceği için, 2019'da web'de tabloların nasıl oluşturulabileceğini görelim.

Yalnızca CSS Seçenekleri

Veri kümeniz o kadar büyük değilse ve sayfalandırma ve sıralama gibi özellikler gerekli değilse JavaScript içermeyen bir seçenek düşünün. Büyük bir kitaplığın ek ağırlığı olmadan, tüm ekran boyutlarında iyi çalışan bazı güzel sonuçlar elde edebilirsiniz.

Ne yazık ki, erişilebilirlik cephesinde bazı DOM manipülasyonları için JavaScript'in yardımı olmadan, yalnızca birkaç CSS seçeneğimiz var. Ancak küçük veri kümeleri için genellikle yeterlidir.

Seçenek 1: Hiçbir Şey Yapma

Düşük çaba gerektiren bir senaryo ile başlayacağız. Verileriniz yalnızca birkaç sütun ve çok sayıda satır içeren bir tabloya sığıyorsa, böyle bir tablo başlangıçta mobil kullanıma hemen hemen hazırdır.

Karşılaştığınız sorun, muhtemelen daha geniş ekranlarda çok fazla alana sahip olmaktır, bu nedenle, dar bir ekranda gerektiği gibi küçülmesine izin verirken, masanın maksimum max-width maksimum genişlikle "kapatmak" tavsiye edilebilir.

Bu tür bir kalıp, en iyi sonucu, verilerinizin kendisi satırlar ve metin satırları değilse verir. Sayısal veya kısa ifadeler ise, muhtemelen fazla bir şey yapmamaktan kurtulabilirsiniz.

2. Seçenek: Parşömene Stil Ver

David Bushell, yanıt veren tablolar için tekniğini 2012'de yazdı; bu, taşma başlatmayı ve kullanıcıların daha fazla veri görmek için kaydırmalarına izin vermeyi içeriyordu. Bunun tam olarak yanıt veren bir çözüm olmadığı iddia edilebilir, ancak teknik olarak kapsayıcı, görünümün genişliğine yanıt veriyor.

Önce “temel” taşmaya bakalım. Temelde hava alıntıları kullandığımı hayal edin, çünkü kayan gölgeler için stil başka bir şey değil. Yine de, bu örnekte “temel”, tablonun hiçbir şekilde dönüştürülmediği gerçeğini ifade eder.

Kayan gölgeler yapmak için kullanılan bu teknik, Roma Komarov ve Lea Verou'nun sihir yaratmak için birbirlerinin fikirlerini karıştırmasından geliyor. İçeren öğede arka plan görüntüleri olarak birden çok degradenin (doğrusal ve radyal) kullanılmasına ve arka planı içeriğine göre konumlandırmak için arka plan background-attachment: local kullanılmasına bağlıdır.

Bu tekniğin güzel yanı, kayan gölgeleri desteklemeyen tarayıcılar için tabloyu normal şekilde kaydırabilmenizdir. Düzeni hiç bozmaz.

Başka bir kaydırma seçeneği, <tbody> öğesinin içeriğine yatay kaydırma uygularken tablo başlıklarını satır yapılandırmasından sütun yapılandırmasına çevirmek olabilir. Bu teknik, tablonun satırlarını sütunlara dönüştürmek için Flexbox davranışından yararlanır.

Tabloya display: flex uygulayarak, <thead> ve <tbody> , varsayılan olarak aynı esnek çizgide yan yana yerleştirilmiş olan esnek çocukları yapar.

Ayrıca <tbody> öğesini esnek bir kap haline getiriyoruz, böylece içindeki tüm <tr> öğelerini de tek bir esnek çizgide düzenlenmiş esnek çocuklar haline getiriyoruz. Son olarak, her tablo hücresinin ekranı, varsayılan table-cell yerine block şekilde ayarlanmalıdır.

Bu tekniğin avantajı, başlıkların sabit bir başlık efekti gibi her zaman görünümde olmasıdır, böylece kullanıcılar veri sütunlarında gezinirken bağlamı kaybetmezler. Unutulmaması gereken bir şey, bu tekniğin görsel ve kaynak sıralamasında bir tutarsızlıkla sonuçlanması ve bu da işleri biraz sezgisel hale getirmesidir.

Bazı JavaScript Üzerine Serpin

Daha önce bahsedildiği gibi, tablonun display değerlerinin değiştirilmesiyle değiştirilmesini içeren yerleşim seçeneklerinin bazen erişilebilirlik üzerinde olumsuz etkileri vardır ve bu da düzeltilmesi için bazı küçük DOM manipülasyonları gerektirir.

Ek olarak, Andrew Coyle'dan veri tabloları tasarlamaya gelince, sayfalandırma, sıralama, filtreleme vb. (etkinleştirmek için JavaScript gerektiren özellikler) gibi özellikler de dahil olmak üzere bir dizi kullanıcı deneyimi ipucu vardır.

Nispeten daha basit bir veri kümesiyle çalışıyorsanız, belki bu özelliklerden bazıları için kendi işlevlerinizi yazmak istersiniz.

Erişilebilirlik Düzeltmesi ile Bloklara Satır

Bildiğim kadarıyla, bu duyarlı veri tablosu tekniği, Chris Coyier'in 2011'de yazdığı CSS-Tricks "Duyarlı Veri Tabloları" makalesinden ortaya çıktı. O zamandan beri başkaları tarafından uyarlandı ve genişletildi.

Bu tekniğin özü, tablo öğesinin ve alt öğelerinin görüntüleme özelliğini dar bir görünüm alanında block şekilde değiştirmek için bir medya sorgusunu kullanmaktır.

Dar bir ekranda, tablo başlıkları görsel olarak gizlenir, ancak yine de erişilebilirlik ağacında bulunur. Tablo hücrelerine veri nitelikleri uygulayarak, etiketin içeriğini HTML'de tutarken, veriler için etiketleri CSS aracılığıyla görüntüleyebiliriz. İşaretlemenin ve stillerin nasıl göründüğü için lütfen aşağıdaki CodePen'e bakın:

Orijinal yöntem, etiket metnini görüntüleyen sözde öğeye bir genişlik uygular, ancak bu, etiketinizin başlamak için ihtiyaç duyduğu alan miktarını bilmeniz gerektiği anlamına gelir. Yukarıdaki örnek, biraz farklı bir yaklaşım kullanır, bu sayede etiket ve veriler her biri kendi içeren bloklarının zıt taraflarındadır.

Esnek biçimlendirme bağlamında otomatik kenar boşlukları aracılığıyla böyle bir etki elde edebiliriz. Her bir <td> öğesi için display özelliğini flex olarak ayarlarsak, sözde öğeler, kaynak öğelerinin doğrudan çocuklarıymış gibi kutular oluşturduğundan, <td> td> öğesinin esnek çocukları haline gelirler.

Bundan sonra, hücrenin içeriğini hücrenin uzak ucuna itmek için sözde öğede margin-right: auto ayarını yapma meselesidir.

Dar görünüm alanı düzenini yapan başka bir yaklaşım, Grid ve display: contents content kombinasyonunu kullanmaktır. Destekleyen tarayıcılardaki display: contents şu anda erişilebilirlikle ilgili sorunları olduğunu ve bu hatalar giderilene kadar üretimde bu yöntemin kullanılmaması gerektiğini lütfen unutmayın.

Ama belki bunu bu hatalar çözüldükten sonra okuyorsunuz, bu durumda alternatif bir düzen seçeneği var.

Her <tr> öğesi display: grid ve her <td> öğesi display: contents olarak ayarlanır. Yalnızca bir ızgara kapsayıcısının doğrudan alt öğeleri, bir ızgara biçimlendirme bağlamına katılır; bu durumda, <td> öğesidir.

<td> display: contents uygulandığında, içeriğiyle “değiştirilir”, bu durumda sözde öğe ve <td> içindeki <span> bunun yerine ızgara çocukları olur.

Bu yaklaşımla ilgili sevdiğim şey, sözde öğelerin sütununu boyutlandırmak için max-content kullanma yeteneğidir, bu da sütunun her zaman en uzun etiketin genişliği olmasını sağlar, bunun için manuel olarak bir genişlik değeri atamamıza gerek kalmaz.

Gelecekte, min-content , max-content ve fit-content boyutlandırma değerleri (CSS Intrinsic & Extrinsic Size Modülü Düzey 3 kapsamındadır) genel width ve height değerleri olarak desteklendiğinde, döşeme için daha da fazla seçeneğimiz olacak şeyler çıktı.

Bu yaklaşımın dezavantajı, tablo hücrenizdeki içeriğin çevresinde ek <span> veya <p> yoksa, zaten yoksa, buna stil uygulamanın hiçbir yolu yoktur.

Basit Sayfalandırma

Bu örnek, bu CodePen'den Gjore Milevski tarafından div'ler yerine tablo satırlarında sayfalandırma yapmak için değiştirilen temel bir sayfalandırma uygulamasını göstermektedir. Önceki bölümde tartışılan "stil kaydırma" örneğinin bir uzantısıdır.

Düzen açısından bakıldığında, Flexbox, sayfalandırma öğelerini çeşitli görüntü alanı boyutlarında konumlandırmak için çok kullanışlıdır. Farklı proje tasarımlarının farklı gereksinimleri olacaktır, ancak Flexbox'ın çok yönlülüğü, bu farklılıkları buna göre karşılamanıza izin vermelidir.

Bu durumda, sayfalandırma sayfada ortalanır ve tablonun üstündedir. Geri ve ileri gezinme kontrolleri, daha geniş ekranlarda sayfa göstergelerinin her iki yanına yerleştirilmiştir, ancak dördü de dar ekranlarda sayfa göstergelerinin üzerinde görünür.

Bunu order özelliğinden yararlanarak yapabiliriz. İçeriğin görsel olarak yeniden sıralanması her zaman dikkate alınarak yapılmalıdır, çünkü bu özellik kaynak sırasını değiştirmez, yalnızca ekranlarda nasıl göründüğü.

Basit Sıralama

Bu örnek, Peter Noble tarafından hem metin hem de sayılar için bu kod parçacığından değiştirilen temel bir sıralama uygulamasını göstermektedir:

Hangi sütunun şu anda ve hangi sırayla sıralandığını gösteren bir tür göstergeye sahip olmak faydalı olacaktır. Bunu, daha sonra istediğiniz gibi şekillendirilebilen CSS sınıflarının eklenmesiyle yapabiliriz. Bu durumda, gösterge sembolleri, hedef başlığa tıklandığında değiştirilen sözde öğelerdir.

Basit Arama

Bu örnek, her tablo hücresinin tüm metin içeriğini yineleyen ve arama giriş alanıyla eşleşmeyen tüm satırları gizlemek için bir CSS sınıfı uygulayan temel bir filtreleme işlevidir.

Böyle bir uygulama nispeten saftır ve kullanım durumunuz bunu gerektiriyorsa, bunun yerine sütun başına arama yapmak mantıklı olabilir. Bu senaryoda, her bir girdi alanının kendi sütunlarında tablonun bir parçası olması iyi bir fikir olabilir.

Bırakın Bir Kütüphane İşlesin

Yukarıdaki JavaScript snippet'leri, daha büyük miktarda veri içeren tabloların, bu tabloların kullanıcıları için hayatı kolaylaştırmak için nasıl geliştirilebileceğini göstermeye hizmet eder. Ancak gerçekten büyük veri kümeleriyle, büyük tablolarınızı yönetmek için mevcut bir kitaplığı kullanmak muhtemelen mantıklı olabilir.

Sütun geçiş modeli, gerekli olmayan sütunların daha küçük ekranlarda gizlendiği bir modeldir. Normalde, yalnızca görünüm alanı dar olduğu için içeriği gizleme hayranı değilim, ancak Filament Group'tan Maggie Costello Wachs'ın bu yaklaşımı, kullanıcıların gizli sütunları geri değiştirmelerine izin veren bir açılır menü sağlayarak bu sorunumu çözüyor. görüş.

Yukarıdaki makale 2011'de yayınlandı, ancak Filament Group o zamandan beri Tablesaw olarak bilinen ve sıralama, satır seçimi, uluslararasılaştırma ve benzeri özellikleri içeren eksiksiz bir duyarlı tablo eklentileri paketi geliştirdi.

TableSaw'daki sütun geçiş özelliği de orijinal makaledeki örneklerin aksine artık jQuery'ye bağlı değil. Tablesaw, şu anda jQuery'ye bağımlılığı olmayan bulabildiğim tek kitaplıktan biri.

Toplama

Dışarıda sayısız tablo tasarım deseni var ve hangi yaklaşımı seçeceğiniz büyük ölçüde sahip olduğunuz veri türüne ve bu verilerin hedef kitlesine bağlıdır. Günün sonunda tablolar, verilerin düzenlenmesi ve sunumu için bir yöntemdir. Kullanıcılarınız için hangi bilgilerin en önemli olduğunu anlamak ve onların ihtiyaçlarına en iyi şekilde hizmet eden bir yaklaşıma karar vermek önemlidir.

Daha fazla okuma

• “Yalnızca CSS Duyarlı Tablolar,” David Bushell
• “Erişilebilir, Basit, Duyarlı Tablolar,” Davide Rizzo, CSS-Tricks
• “Duyarlı Masa Düzeni,” Matt Smith
• “Duyarlı Modeller: Tablolar,” Brad Frost
• "Hey, Tabloları Kullanmak Hala Sorun Değil," Adrian Roseli
• Adrian Roseli "Tablolar, CSS Görüntü Özellikleri ve ARIA"
• “Veri Tabloları,” Heydon Pickering