WordPress'te Duyarlı Tablolar Nasıl Oluşturulur

Tablolar, verileri okunabilir hale getirmek için düzenlemenin harika bir yoludur. Adresleri, ürün özelliklerini, envanteri, programları, istatistikleri ve daha fazlasını görüntülemek için iyidirler. Verileri doğru bir şekilde görüntülemek için alana ihtiyaç duyan tabloların doğası gereği, yanıt vermeleri zordur.

Tabloların duyarlı olması gerekiyor mu? Dezavantajı ne? Bu makalede, tabloların neden duyarlı olması gerektiğini gösteriyorum ve herhangi bir ekran boyutunda doğru şekilde görüntülenmeleri için onları biçimlendirmek için birkaç yöntem araştırıyorum. Görüntüler, sayfayı ücretsiz Yirmi Onyedi WordPress temasında çeşitli mobil cihazlar olarak görüntülemek için Google Chrome Geliştirici Araçları'nın (bir sayfaya sağ tıklayın ve İncele'yi seçin) ekran görüntüleridir.

Youtube Kanalımıza Abone Olun

WordPress Web Siteleri için Duyarlı Tablolar Neden Önemlidir?

Yukarıdaki resim, bir mobil cihazda yanıt vermeyen bir tablo görüntülendiğinde ne olduğunu gösterir. Kullanıcı verileri görmek için ekranı kaydırmak zorunda kalır. Bu, tüm sayfayı başlık ve sayfa başlığından görebileceğiniz gibi hareket ettirir, bu da web sitesinin tasarımına zarar verir ve iyi bir kullanıcı deneyimi değildir.

Bir ekranda görüntülenen diğer her şey gibi, tablolar da duyarlı olmalı, kullanılabilir ve okunabilir kalmaları için kendilerini görüntüleme alanına uyacak şekilde ayarlamalıdır. Tabloların ayrıca Divi veya diğer sayfa oluşturma temaları ve sayfa oluşturma eklentileri ile oluşturulanlar gibi mizanpajlara uyması gerekir.

Sorun şu ki, verileri sunmak için bir tablonun belirli bir miktarda alana ihtiyacı var. Bu alan, bir tablonun verilerini doğru bir şekilde görüntülemek için ihtiyaç duyduğu minimum alandır. Bu, ekranın boyutuna her zaman uyum sağlayamayacağı anlamına gelir. Ancak yapabileceği şey, kullanılabilir kalması için kendisini farklı şekilde biçimlendirmektir.

HTML Tabloları

Tablo oluşturmak için en popüler yöntemlerden biri HTML kullanmaktır. El ile veya TinyMCE Advanced veya benzeri eklentiler gibi eklentilerle kodlanabilirler.

TinyMCE Advanced, kolayca HTML tabloları oluşturabilir. İstediğiniz sütun ve satır sayısını vurgulayın ve bilgilerinizi doldurun. Yalnızca birkaç sütun içeren küçük tablolar, genellikle çoğu cihazda ve ekran boyutunda iyi görünür.

Maalesef tablolar yanıt vermiyor. Tabloyu bir mobil cihazda veya daha küçük bir pencerede görüntülediğimde tablonun bir kısmı gizleniyor. Mobil cihaz seçiliyken Chrome'un geliştirici araçlarını kullanmanın nasıl göründüğü aşağıda açıklanmıştır. Bu görünümde kullanıcı yedinci hücreden sonraki verileri göremez. Bu iyi bir kullanıcı deneyimi değil.

HTML tabloları ekran boyutlarına yanıt verebilir, ancak içeriği ezer ve küçük ekranın ötesine taşar, bu da okuyucuların tarayıcıyı mobil ekranlarda sürüklemesine neden olur. Bu, özellikle uzun metin veya resim dizileri gibi çok sayıda veri içeren tablolar için geçerlidir.

Duyarlı Tablolar Nasıl Oluşturulur

Duyarlı bir tablo oluşturmanın iki yolu vardır: HTML ve CSS'yi manuel olarak ve eklentileri kullanarak. El ile kodlama için en iyi seçenek, kesme noktaları ayarlayarak tabloyu birden çok ekran boyutunda görüntülenebilir kalacak şekilde yeniden biçimlendirmektir. Eklentiler, seçtiğiniz eklenti türüne bağlı olarak bu kodu oluşturur veya kendi tablolarını biçimlendirir.

Tabloları yeniden biçimlendirmek onları kaydırılabilir veya istiflenebilir hale getirebilir. Kaydırma, bir tablonun tüm ekranı kaydırmadan pencere içinde kaldığında okunabilir olmasını sağlamak için kabul edilebilir bir yöntemdir. Kesme noktasını, metnin boyutu hiçbir zaman küçülmeyecek veya birlikte buruşmayacak şekilde ayarlayabilirsiniz. Bunun yerine, ekran belirlediğiniz kesme noktasına ulaştığında tablo kaydırılabilir hale gelir.

HTML Tabloları için Manuel Ayarlamalar

Bu, HTML ile yapılmış bir tablodur. Tablo kaydırıldığında sayfayı da kaydırdığına dikkat edin. Bu resimde başlık ve başlığın hareket ettiğini ve web sitesinin tasarımını kesintiye uğrattığını görebilirsiniz. Bu, bir medya kesme noktası ayarlamak için CSS kullanılarak düzeltilebilir.

CSS'yi kullanma

HTML tablonuza yukarıdaki resimde (Metin sekmesinde) 'responsive' gibi bir sınıf verin. Ardından, stil sayfanıza 'responsive' adlı CSS sınıfını ekleyeceksiniz. Bunu bir alt temanın stil sayfasına ekleyerek (panoda Görünüm, Düzenleyici, Stil Sayfası'na gidin), Divi gibi temaların CSS kod düzenleyicisinde (panoda Divi, Tema Seçenekleri'ne gidin ve kaydırın) altta) veya tema özelleştiricideki Ek CSS içinde.

Bu kodu CSS konumunuza yapıştırın:

@media only screen and (max-width: 840px) {
table.responsive {
margin-bottom: 0;
overflow: hidden;
overflow-x: scroll;
display: block;
white-space: nowrap;
}
}

Kesme noktası için ekran boyutunu seçmek için maksimum genişliği ayarlayın (840 piksel seçtim).

Bu, tabloyu kaydırılabilir bir pencereye yerleştirir. Başlığın yerinde kaldığına ve tablonun pencere içinde kaydırılarak sayfa tasarımını koruduğuna dikkat edin.

Bu, HTML ve CSS konusunda rahat olanlar için iyi çalışır, ancak herhangi bir sorun varsa kurulum ve sorun giderme zaman alabilir. Tablolarınızı duyarlı hale getirmenin çok daha hızlı ve kolay bir yolu bir eklenti kullanmaktır.

Eklentileri Kullanma

Duyarlı tablolar oluşturmak için birkaç iyi eklenti vardır. Eklentilerin çoğunda tablolar sayfadan veya gönderiden ayrı olarak oluşturulur ve ardından bir kısa kod kullanılarak eklenir. Bu eklentilerden bazıları tablolarınızı yönetmenize, yeniden kullanmanıza ve içe veya dışa aktarmanıza izin verirken, diğerleri mevcut HTML tablolarınızı duyarlı hale getirir.

İşte en popüler eklentilerden bazılarına nasıl çalıştıklarına dair örneklerle birlikte bir göz atın.

TabloBasın

TablePress, 500.000'den fazla aktif yükleme ile en popüler tablo eklentilerinden biridir. Kutunun dışında TablePress yanıt vermiyor. Neyse ki kolay bir çözüm var.

TablePress için Duyarlı Tablolar, okuyucularınızın kullandığı ekran türüne göre çevirme, kaydırma ve daraltma şeklinde görüntülemenize olanak tanıyan bir tablonun görüntüleme modlarını değiştiren birinci sınıf bir uzantıdır.

Kaydırma için kısa kod eklemek, kullanıcının tüm verileri görebilmesi için tabloyu içeren kaydırılabilir bir pencere oluşturur. İşte bir telefondaki masaya bir bakış.

Bu eklentinin asıl avantajı çevirme modudur. Bu mod, bir cihaz seçerek bir kesme noktası belirlemenizi sağlar. Bu, cihaza göre görüntülenebilen birden çok bölüm veya satır oluşturmanıza olanak tanıyan Divi gibi temalarla kullanılabilir. Masaüstü, tablet, telefon veya tümü arasında seçim yapın. Yukarıdaki örnekte hepsini seçtim.

Daha fazla bilgi

Kolay Masa

Easy Table, verilerinizi CVS dosyaları olarak içeriğinizdeki tablo etiketleri içine yerleştirmeniz ve otomatik olarak bir tabloya dönüştürmeniz açısından benzersizdir. Seçenekler içindeki özellikleri ve parametreleri ayarlarsınız.

Duyarlı bir pencerede görüntülendiğinde tablo kaydırılabilir hale gelir. Biçimlendirmeyi kontrol etmek için birçok ayarlanabilir parametreye sahiptir.

Daha fazla bilgi

Masa Yapıcı

Table Maker, satırları veya sütunları istifleme arasında seçim yapmanızı sağlayan bir tablo oluşturma aracıdır. Tablolar ayrı ayrı oluşturulur ve kısa kodlar kullanılarak içeriğinize yerleştirilir.

Sütun Yığını seçiliyken nasıl göründüğü aşağıda açıklanmıştır.

Bu örnek, Satır Yığını kullanır.

Daha fazla bilgi

Magic Liquidizer Duyarlı Tablo

Magic Liquidizer tablo oluşturmaz. Bunun yerine, tüm HTML tablolarıyla çalışır ve tablolarınızın biçimleri değiştirdiği kesme noktasını ayarlamanıza olanak tanır. Tabloları sınıfları veya kimlikleri kullanarak belirtebilir veya varsayılan tablo ayarını kullanarak genel olarak kullanabilirsiniz.

Bu standart bir HTML tablosudur. Tabloları otomatik olarak dikey olarak istifler.

Daha fazla bilgi

Otomatik Duyarlı Tablolar

Bu, size tablolar oluşturmak için araçlar vermek yerine, daha önce oluşturduğunuz HTML tablolarıyla çalışır ve onları duyarlı hale getirir. İstediğiniz herhangi bir tabloda kullanmak için bir CSS sınıfı oluşturabilir veya tüm tablolar için ayarları etkinleştirebilirsiniz. Kesme noktasını istediğiniz piksel boyutuna ayarlayabilirsiniz.

Sonuç, pikseller kesme noktası olarak belirlediğim sayıya ulaştığında yeniden biçimlendirilmiş bir tablodur. Bunun daha önce oluşturduğum tablolarda çalışmasını seviyorum.

Daha fazla bilgi

Veri Tabloları Oluşturucu

Data Tables Generator, varsayılan olarak yanıt veren bir tablo oluşturucudur. Tablolar, standart kısa kod kullanılarak, tema dosyaları içinde php kodu ile görüntülenebilir veya tek bir hücre görüntülenebilir. Hatta bir elektronik tablo gibi hesaplamalar yapacak ve çizelgeleri görüntüleyecektir. Muhtemelen bu listedeki en güçlü eklentidir.

Aralarından seçim yapabileceğiniz üç duyarlı modu vardır:

• Standart
• Otomatik sütun gizleme
• yatay kaydırma

Standart, kesme noktasına ulaşana kadar tablonun boyutunu küçültür.

Kesme noktasına ulaştıktan sonra tabloyu şu şekilde biçimlendirir.

Bu örnekte Otomatik Sütun Gizleme kullanılmaktadır. Tabloları kaydırmayan bir pencereye yerleştirir. Bunun yerine kullanıcılar, görüntülenmeyen içeriği görmek için yeşil artıyı tıklayabilir.

Bu, Yatay Kaydırma kullanır. Bunun hala bir seçenek olduğunu görmek güzel.

Daha fazla bilgi

Son düşünceler

Tablolar, WordPress web sitelerinde verileri görüntülemenin harika bir yoludur, ancak bunları duyarlı hale getirmek zor olabilir. Okuyucularınız için en iyi kullanıcı deneyimini sağlamak için tablolarınızı duyarlı hale getirmek, diğer web tasarım öğeleri kadar önemlidir.

HTML ve CSS kullanarak veya bu altı eklentiden birini kullanarak, web sitenizin tasarımına zarar vermeden tablolarınızı duyarlı ve okunabilir hale getirebilirsiniz. Aralarında ihtiyacınız olan özellikleri ve düzen seçeneklerini bulacağınızdan emin olabilirsiniz.

Sizden duymak isteriz. Bir tabloyu duyarlı hale getirmek için favori yönteminiz nedir?

Timashov Sergiy / Shutterstock.com aracılığıyla Öne Çıkan Görsel