WordPress’te Duyarlı Bir Tablo Nasıl Yapılır
Tablo, okunabilmesi için verileri ayarlamanın iyi bir yoludur. Adresler, ürün özellikleri, envanter, programlar, istatistikler ve daha fazlasını görüntülemek için iyidirler. Verileri doğru bir şekilde görüntülemek için alan gerektiren tablonun doğası, tablonun yanıt vermesi zordur. Masanın duyarlı olması gerekiyor mu? Dezavantajlar nelerdir? Bu makalede, tablonun neden duyarlı olması gerektiğini gösteriyorum ve herhangi bir ekran boyutunda doğru görüntülenecek şekilde biçimlendirmek için çeşitli yöntemleri araştırıyorum. Resim, sayfayı ücretsiz yirmi on yedi WordPress temasında çeşitli mobil cihazlar olarak görüntülemek için Google Chrome geliştiricisinin (sayfada sağ -sayfada sağlanın ve kontrol et’i seçin) bir ekran görüntüsüdür.
YouTube kanalımıza abone olun Duyarlı tablonun WordPress sitesi için neden önemli olduğunu
Sorun şu ki, tablo verileri sunmak için bir dizi alan gerektiriyor. Bu alan, verileri doğru şekilde görüntülemek için tablonun ihtiyaç duyduğu minimum alandır. Bu, her zaman ekran boyutuna ayarlanamayacağı anlamına gelir. Ancak yapabileceği şey, hala kullanılabilmesi için farklı biçimlendirmektir. HTML Tablo Tablo yapmak için en popüler yöntemlerden biri HTML kullanmaktır. Elle veya Tinymce Advanced veya benzer eklentiler gibi eklentilerle kodlanabilirler. Advanced Tinymce, HTML tablolarını kolayca yapabilir. İstediğiniz sütun ve satır sayısını vurgulayın ve bilgilerinizi doldurmanız yeterlidir. Sadece birkaç sütuna sahip küçük bir tablo, çoğu cihaz ve ekran boyutunda genellikle iyi görünür. Maalesef tablo duyarlı değil. Daha küçük bir hücresel cihaz veya pencerede bir tablo gördüğümde, tablo bölümü gizlidir. Seçilen mobil cihaza sahip bir Chrome geliştiricisi kullanarak aşağıdaki görünüm. Bu görüşe göre, kullanıcı yedinci hücre üzerinden veri göremez. Bu iyi bir kullanıcı deneyimi değil. HTML tablosu ekran boyutuna yanıt verebilir, ancak içeriği küçültür ve küçük bir ekrandan taşar ve okuyucunun tarayıcıyı hücresel ekranda sürüklemesine neden olur. Bu özellikle uzun metin dizeleri veya görüntüler gibi birçok veriye sahip tablolar için geçerlidir. Duyarlı bir tablo nasıl yapılır Duyarlı tablolar oluşturmanın iki yolu vardır: HTML ve CSS’yi manuel olarak kullanma ve eklentiler kullanma. Manuel kodlama için en iyi seçim, geçici durdurma noktasını ayarlayarak birkaç ekran boyutunda görülebilmesi için tabloyu yeniden biçimlendirmektir. Eklenti, seçtiğiniz eklenti türüne bağlı olarak bu kodu veya kendi tablolarını biçimlendirir. Yeniden şekillendirme tabloları yuvarlanabilmesini veya istiflenmesini sağlayabilir. Kaydırma, tüm ekranı kaydırmadan pencerede kalırken masayı tutmak için kabul edilebilecek bir yöntemdir. Breakpoint’i metin asla küçülmeyecek veya küçülmeyecek şekilde ayarlayabilirsiniz. Bunun yerine, ekran belirttiğiniz geçici durdurma noktasına ulaştığında tablo değişecek değişiklikler. HTML tablosu için manuel spekülatörler
Bu HTML ile yapılmış bir tablo. Tablo sayfayı da parlattığında dikkat edin. Kanopiyi görebilirsiniz ve başlık, web sitesi tasarımını rahatsız ederek bu görüntüde aktarıldığını görebilirsiniz. Bu, kesme noktası ortamını ayarlamak için CSS kullanılarak geliştirilebilir. CSS kullanarak
Yukarıdaki resimde (Metin sekmesinde) HTML tablo sınıfınıza ‘Duyarlı’ gibi verin. Ardından, stil sayfanıza ‘Duyarlı’ adlı bir CSS sınıfı ekleyeceksiniz. Bunu, divi (açık dick pano açık divi, tema seçeneği ve kaydırma panosunda CSS tema kodunun editöründe (açık görünüm, editör, stil sayfasında gösterge tablosunda) alt tema stili sayfasına (gösterge tablosunda) ekleyerek yapabilirsiniz. aşağı) veya tema ayarındaki ek CSS’de. Bu kodu CSS konumunuza yapıştırın: @media yalnızca ekran ve (maks. Width: 840px) { Tablo. Yanıt veriyor {
Marj-Alt: 0;
Taşma: gizli;
Overflow-X: kaydırma; ekran: blok;
Beyaz boşluk: nowrap;
}
} Breakpoint için bir ekran boyutu seçmek için maksimum genişliği (840px’i seçtim) ayarlayın.
Bu, masayı piyasaya sürülebilecek bir pencereye yerleştirir. Başlığa dikkat edin, yerinde kalır ve masa pencerede yuvarlanarak bahçenin tasarımını tamamlayın. Bu, HTML ve CSS ile rahat olanlar için iyi çalışır, ancak sorunlar varsa sorunları hazırlamak ve çözmek zaman alır. Masanızı duyarlı hale getirmenin çok daha hızlı ve daha kolay bir yolu eklentileri kullanmaktır.
Eklentileri kullanarak duyarlı tablolar yapmak için birkaç iyi eklenti vardır. Birçok eklenti ile tablo sayfadan veya yayından ayrı olarak yapılır ve daha sonra kısa bir kod kullanılarak eklenir. Bu eklentilerin bazıları tabloları yönetmenize, tekrar kullanmanıza ve bunları içe aktarmanıza veya dışa aktarmanıza izin verirken, diğerleri HTML tablolarınızı şu anda duyarlı hale getirir. İşte nasıl çalıştığına dair örneklerle en popüler eklentilerden bazıları. Mejatekan
TablePress, 500.000’den fazla aktif kuruluma sahip en popüler tablo eklentilerinden biridir. Tablo basın kutusunun dışında duyarlı değil. Neyse ki kolay bir çözüm var. Tablo Press için Duyarlı Tablo, tablonun okuyucunuz tarafından kullanılan ekran türüne göre ters, kaydırmanızı ve büzülmenizi sağlayan tablonun görüntüleme modunu değiştiren birinci sınıf bir uzatmadır. Kullanıcıların tüm verileri görebilmesi için tabloyu yüklemek için piyasaya sürülebilecek bir pencere yapmak için kaydırmaya kısa bir kod ekleyin. İşte masanın telefonda görünümü. Bu eklentideki gerçek avantaj Flip Modu. Bu mod, cihazı seçerek kesme noktasını belirlemenizi sağlar. Bu, Divi gibi, cihaza göre görüntülenebilen birkaç parça veya satır oluşturmanızı sağlayan temalarla kullanılabilir. Masaüstü, tablet, cep telefonu veya hepsini seçin. Yukarıdaki örnekte hepsini seçtim. Daha fazla bilgi kolay
Benzersiz kolay tablo, verilerinizi içeriğinizdeki tablo etiketine bir CVS dosyası olarak yerleştirdiğiniz ve otomatik olarak bir tablo olarak değiştirildiğinden. Opsiyondaki öznitelikleri ve parametreleri ayarlarsınız.
Duyarlı bir pencerede görüntülendiğinde, tablo piyasaya sürülebilir. Biçimlendirmeyi kontrol etmek için ayarlanabilen birçok parametreye sahiptir. Masa Makineleri hakkında daha fazla bilgi
Tablo üreticisi, istifleme satırları veya sütunlar arasında seçim yapmanızı sağlayan bir tablo oluşturma aracıdır. Tablo ayrı olarak yapılır ve kısa bir kod kullanarak içeriğinize yerleştirilir.Bu, sütun yığını seçilmiş gibi görünüyor. Bu örnek bir satır yığını kullanır. Daha fazla bilgi tablosu duyarlı sihirli sıvı Magic Liquitizer bir masa oluşturmaz. Bunun yerine, bu tüm HTML tablolarıyla çalışır ve tablonuzun biçimi değiştirdiği yerde kesme noktasını ayarlamanıza olanak tanır. Tabloyu sınıf veya kimliği kullanarak belirleyebilir veya varsayılan tablo ayarlarını kullanarak küresel olarak kullanabilirsiniz. Bu standart bir HTML tablosudur. Tabloları otomatik olarak dikey olarak biriktirir. Daha fazla bilgi otomatik duyarlı tablo Size bir tablo oluşturmak için bir araç vermek yerine, bu tablo oluşturduğunuz HTML tablosu ile çalışır ve duyarlı hale getirir. İstediğiniz tabloda kullanmak için bir CSS sınıfı oluşturabilir veya tüm tablolar için ayarları etkinleştirebilirsiniz. İstediğiniz piksel boyutuna kesme noktasını ayarlayabilirsiniz. Sonuç, piksel geçici bir durdurma noktası olarak ayarladığım sayıya ulaştığında yeniden şekillendirilmiş bir tablo. Yaptığım masada çalışan bunu seviyorum. Veri tablosunun üreticisi hakkında daha fazla bilgi için Veri Tabloları Jeneratörü varsayılan olarak duyarlı bir tablo üreticisidir. Tablo, tema dosyasında PHP kodu olan veya bir hücre görüntülenen standart bir kısa kod kullanılarak görüntülenebilir. Hatta e -tablo ve ekran grafikleri gibi hesaplamalar bile yapacak. Bu muhtemelen bu listedeki en güçlü eklentidir. Aralarından seçim yapabileceğiniz üç duyarlı modu vardır: Standart Otomatik sütunları gizleme Yatay olarak kaydırın Standartlar, Breakpoint’e ulaşmak için tablo boyutunu azaltacaktır. Kesme noktasına ulaştıktan sonra tabloyu nasıl biçimlendirir.
Bu örnek otomatik bir sütun gizleme kullanır. Bu, yansız bir pencereye bir tablo yerleştirilir. Bunun yerine, kullanıcılar görüntülenmeyen içeriği görüntülemek için Green Plus işaretini tıklayabilir. Bu, yatay kaydırma kullanır. Bunun hala bir seçenek olduğunu gördüğüme sevindim. Daha fazla bilgi Tablonun son zihni, WordPress sitesindeki verileri görüntülemenin iyi bir yoludur, ancak duyarlı hale getirir. Tablonuzu oluşturmak, okuyucunuz için en iyi kullanıcı deneyimini sağlamak için diğer web tasarım öğeleri kadar önemlidir. HTML ve CSS kullanarak veya bu altı eklentiden birini kullanarak, web sitenizin web sitesi tasarımına zarar vermeden masanızı duyarlı ve okumayı kolaylaştırabilirsiniz. Bunlar arasında kesinlikle ihtiyacınız olan özellikleri ve düzen seçeneklerini bulacaksınız. Senden duymak istiyoruz. Duyarlı tablolar oluşturmak için en sevdiğiniz yöntem nedir? Timashov Sergiy / Shutterstock.com aracılığıyla Üstün Görüntü
