Birkaç kolay adımda duyarlı tablolar nasıl oluşturulur
Tablo, organize ve zarif bir şekilde büyük miktarda veri sunmaktadır. Verileri anlamanıza ve doğru sonuçlara ulaşmanıza yardımcı olurlar. Grafikler ve tablolar geleneksel bilgisayar ekranlarında iyi görüntülenir. Ancak, daha küçük bir ekrana sahip bir mobil cihaz kullanmak sorunlara neden olabilir. Veri tablosu, bilgileri kullanılabilecek ve okuyabilecek şekilde görüntülemek için belirtilen alan miktarını gerektirir. Mobil cihazlar tarafından sunulan sınırlı alana sürekli uyum sağlayamazlar. Ne yapabilirsin? Tabloyu duyarlı hale getirebilirsiniz. Duyarlı tablo mümkünse daha küçük olacaktır. Mümkün değilse, sadece hücresel kullanıcıların yine de okuyabilmeleri ve kullanabilmesi için formatı okuyabilirler.
Diğer web sitesi öğeleri gibi, tablolar da duyarlı olmalıdır. Duyarlı ise, mobil cihazlarda iyi görünecek ve izleyiciler için hoş bir deneyim sunacaklar. Ayrıca, bir sayfa yapmanın temasının düzenine ve eklentisine uygun olmalıdırlar. Bu makale duyarlı bir tabloya sahip olmanın ne anlama geldiğini tartışacaktır. Bu aynı zamanda WordPress’te duyarlı tabloların nasıl yapılacağı iki yol açıklayacaktır. Duyarlı bir tablo nedir?
Tüm masa hedefleri, organize ve makul bir şekilde çok fazla bilgi sergilemektir. Ancak insanlar mobil cihazlarda tabloları ve grafikleri görmeye çalıştıklarında genellikle hayal kırıklığına uğradıklarında.
Bunun nedeni, satır ve tablo sütununun ekran ekranından daha geniş olmasıdır. İzleyiciler masayı yuvarlamaya çalışabilirler, ancak bu genellikle hayal kırıklığı ve karışıklıkla sona erer. Duyarlı tablo ayarları ve reformatlar ekran boyutuna göre. Tasarımcılar tablo için kırılma noktası kuralları belirledikleri için bunu yapabilirler. Bu nedenle, izleyici tabloya geçici bir durdurma noktasından daha küçük bir ekranda erişiyorsa, tablo ekran boyutuna uyacak şekilde kendini yeniden biçimlendirecektir. Bazen bu, büyük bir masayı iki parçaya ayırmak anlamına gelir. Ya da belki de verilerin ekrana uyması için başka ayarlamalar yapmak anlamına gelir. Net, duyarlı veri tablosu bunu yapmanın en iyi yoludur. Ne yazık ki, her WordPress teması tabloları farklı işler. Duyarlı tablo temalarının nasıl oluşturulacağını bilmek, daha iyi hücresel kullanıcı deneyimleri oluşturmanıza yardımcı olacaktır. Duyarlı bir tablo nasıl manuel yapılır
Duyarlı tablolar oluşturmak manuel olarak CSS ve HTML kodlama bilgisi gerektirir. Bir evreleme ortamında çalışmak, tablo doğrudan bir web sitesinde çalışmak yerine güvenilir bir şekilde çalışana kadar en iyisidir. Duyarlı bir tablo oluşturmak için üç şeye ihtiyacınız var:
Bunun nedeni, satır ve tablo sütununun ekran ekranından daha geniş olmasıdır. İzleyiciler masayı yuvarlamaya çalışabilirler, ancak bu genellikle hayal kırıklığı ve karışıklıkla sona erer. Duyarlı tablo ayarları ve reformatlar ekran boyutuna göre. Tasarımcılar tablo için kırılma noktası kuralları belirledikleri için bunu yapabilirler. Bu nedenle, izleyici tabloya geçici bir durdurma noktasından daha küçük bir ekranda erişiyorsa, tablo ekran boyutuna uyacak şekilde kendini yeniden biçimlendirecektir. Bazen bu, büyük bir masayı iki parçaya ayırmak anlamına gelir. Ya da belki de verilerin ekrana uyması için başka ayarlamalar yapmak anlamına gelir. Net, duyarlı veri tablosu bunu yapmanın en iyi yoludur. Ne yazık ki, her WordPress teması tabloları farklı işler. Duyarlı tablo temalarının nasıl oluşturulacağını bilmek, daha iyi hücresel kullanıcı deneyimleri oluşturmanıza yardımcı olacaktır. Duyarlı bir tablo nasıl manuel yapılır
Duyarlı tablolar oluşturmak manuel olarak CSS ve HTML kodlama bilgisi gerektirir. Bir evreleme ortamında çalışmak, tablo doğrudan bir web sitesinde çalışmak yerine güvenilir bir şekilde çalışana kadar en iyisidir. Duyarlı bir tablo oluşturmak için üç şeye ihtiyacınız var:
Doğru biçimlendirilmiş HTML tablosu
Ekran ekranı önceden belirlenmiş genişliğin altına düştüğünde tetiklenecek basit CSS kuralları koleksiyonu
Bu CSS kodu, tablo başlık satırını gizleyecek, tablonun satırını sütunlara yeniden düzenleyecek ve her veri hücresine baş hücre içeriği ekleyecektir.
Tablo başlığını aynı tablo sütununda görünen veri hücreleriyle ilişkilendirmek için küçük bir javascript
CSS Duyarlı var metin başlığı = [] için tablo biçiminiz;
Var header = document.querySelectorAll (“kafa”);
var tablo gövdesi = document.querySelectorall (“tbody”); (var i = 0; i <headers.length; i ++) {
Kafa metni [i] = [];
for (var j = 0, headrow; headrow = başlık [i] .res [0] .Cells [j]; j ++) {
VAR şu anda = Headrow;
HeaderText [i]. Push (current.textContent);
}
}
for (var h = 0, tbody; tbody = tablebody [h]; h ++) {
for (var i = 0, satır; satır = tbody.res [i]; i ++) {
for (var j = 0, col; col = row.sel [j]; j ++) {
col.setattribute ("Data-Th", HeadrterText [H] [J]);
}
}
} Kredi kodu: Bunun küçük bir kodu: exis | exisweb.net/resspessive tables-in-wordpress. Orijinal Fikir: Dudley Storey | codepen.io/DudleyStorey/Pen/GEPRD
Bazı insanlar mobil cihazlar için yatay bir rulo tablosu kullanır. Ancak tablo verilerini gruplandırmak ve kaydırma ihtiyacını ortadan kaldırmak, tabloların okunmasını kolaylaştırır. Yukarıdaki kod tabloya kesme noktasını yeniden biçimlendirmesini söyler. Thead öğelerindeki başlık hücrelerini aramak ve bunları TBody öğesindeki veri hücrelerine HTML öznitelikleri olarak ayarlamak için yazılmıştır. Thead ve TBody öğelerine sahip bir masanız yoksa bu kod görüntüleri çalışmaz. Bir sonraki adım CSS etiketleri eklemektir. Bittikten sonra CSS, her sütun ve içerikte tablonun başlığı olarak neyin görüntülenmesi gerektiğini anlayacaktır.
Özel CSS etiketleri @media ekranı ve (maksimum genişlik: 600px) {
Tablo {genişlik:%100;}
Thead {ekran: hiçbir şey;}
TR: NTH-Type (2n) {Color-Background: Miras;}
TR: İlk Çocuk {arka plan: #f0f0f0; Yazı tipi ağırlığı: kalınlık; yazı tipi boyutu: 1.3em;}
tbody td {ekran: blok; metin-align: center;}
TBY TD: Önceden {
İçerik: attr (data-pl);
Ekran bloğu;
Metnin hizalanması: Merkez;
}
} Kredi kodu: Bunun küçük bir kodu: exis | exisweb.net/resspessive tables-in-wordpress. Orijinal Fikirler: Dudley Storey | CodePen.io/DudleyStorey/Pen/GEPRD Tüm farklı temalar. Bu nedenle, kullanıcıların duyarlı tabloları başarıyla uygulamak için tema yapısını anlamaları gerekir. Bazı temalar ek JS kütüphanesi gerektirir. Bu örnek, özel bir CSS kodunun nasıl ekleneceğini gösterir. İlk olarak, görünüşe gidin, sonra özelleştirin, ardından ek CSS. Burada yukarıdaki özel CSS etiketini ekleyebilirsiniz.
Bu kodu kullanmanın en iyi yolu, tablonun göründüğü gönderi veya sayfaya eklemektir. Stil etiketleri arasındaki CSS ve komut dosyası etiketleri arasında JS girin. Kodu düzenleyiciye ekledikten sonra, değişikliğin uygulanması için Publish tuşuna basın. Kodun çalışıp çalışmadığını görmek için bir WordPress ekran muayenesi kullanın. Bu varsayılan test özelliği, içeriği üç farklı büyüklükte ekranda test eder. Veya, CSS kodunu eklediğiniz sayfanın altında, tablonun duyarlı olup olmadığını test etmek ve mobil cihazdaki ekranı görmek için tablet simgesini tıklayın.
HTML ve CSS ile rahat olanlar için, bu duyarlı tablolar yapmak için çok iyi bir çözümdür. Ne yazık ki, bu kodlamaya alışık olmayanlar için zorlu bir çözümdür. Meydana gelen sorunlar varsa, sorunları çözmek ve sorunları çözmek zor olacaktır. Duyarlı bir tablo öğesi yapmanın çok daha hızlı ve daha kolay bir yolu vardır: bir eklenti kullanarak. Duyarlı bir tablo yapmanın daha iyi bir yolu
Yalnızca web sitesine bir grafik veya tablo yerleştirecekseniz, yukarıdaki kod snippet'ini kullanarak çalışır. Ancak, bir tablo düzenli olarak yerleştirecekseniz, duyarlı bir kodu doğrudan temaya gömmek daha iyidir. Herhangi bir kodlamadan tablolar oluşturabilir, yönetebilir, ayarlayabilir ve düzenleyebilirsiniz. Ve en iyi yanı tabloya duyarlıdır. Verilerin kaynağı ne olursa olsun, WPDatatables ile yapılan tablolar varsayılan olarak duyarlıdır. Tablolar herhangi bir cihazda kullanılabilir ve okunabilir. Hangi sütunun gizleneceğini ve mobil cihazda hangi sütunun görülmesi gerektiğini seçebilirsiniz. Ayrıca gizli verileri açılır ve genişletilebilecek bloklar yoluyla kullanılabilir hale getirmeyi de seçebilirsiniz.
Ekran ekranı önceden belirlenmiş genişliğin altına düştüğünde tetiklenecek basit CSS kuralları koleksiyonu
Bu CSS kodu, tablo başlık satırını gizleyecek, tablonun satırını sütunlara yeniden düzenleyecek ve her veri hücresine baş hücre içeriği ekleyecektir.
Tablo başlığını aynı tablo sütununda görünen veri hücreleriyle ilişkilendirmek için küçük bir javascript
CSS Duyarlı var metin başlığı = [] için tablo biçiminiz;
Var header = document.querySelectorAll (“kafa”);
var tablo gövdesi = document.querySelectorall (“tbody”); (var i = 0; i <headers.length; i ++) {
Kafa metni [i] = [];
for (var j = 0, headrow; headrow = başlık [i] .res [0] .Cells [j]; j ++) {
VAR şu anda = Headrow;
HeaderText [i]. Push (current.textContent);
}
}
for (var h = 0, tbody; tbody = tablebody [h]; h ++) {
for (var i = 0, satır; satır = tbody.res [i]; i ++) {
for (var j = 0, col; col = row.sel [j]; j ++) {
col.setattribute ("Data-Th", HeadrterText [H] [J]);
}
}
} Kredi kodu: Bunun küçük bir kodu: exis | exisweb.net/resspessive tables-in-wordpress. Orijinal Fikir: Dudley Storey | codepen.io/DudleyStorey/Pen/GEPRD
Bazı insanlar mobil cihazlar için yatay bir rulo tablosu kullanır. Ancak tablo verilerini gruplandırmak ve kaydırma ihtiyacını ortadan kaldırmak, tabloların okunmasını kolaylaştırır. Yukarıdaki kod tabloya kesme noktasını yeniden biçimlendirmesini söyler. Thead öğelerindeki başlık hücrelerini aramak ve bunları TBody öğesindeki veri hücrelerine HTML öznitelikleri olarak ayarlamak için yazılmıştır. Thead ve TBody öğelerine sahip bir masanız yoksa bu kod görüntüleri çalışmaz. Bir sonraki adım CSS etiketleri eklemektir. Bittikten sonra CSS, her sütun ve içerikte tablonun başlığı olarak neyin görüntülenmesi gerektiğini anlayacaktır.
Özel CSS etiketleri @media ekranı ve (maksimum genişlik: 600px) {
Tablo {genişlik:%100;}
Thead {ekran: hiçbir şey;}
TR: NTH-Type (2n) {Color-Background: Miras;}
TR: İlk Çocuk {arka plan: #f0f0f0; Yazı tipi ağırlığı: kalınlık; yazı tipi boyutu: 1.3em;}
tbody td {ekran: blok; metin-align: center;}
TBY TD: Önceden {
İçerik: attr (data-pl);
Ekran bloğu;
Metnin hizalanması: Merkez;
}
} Kredi kodu: Bunun küçük bir kodu: exis | exisweb.net/resspessive tables-in-wordpress. Orijinal Fikirler: Dudley Storey | CodePen.io/DudleyStorey/Pen/GEPRD Tüm farklı temalar. Bu nedenle, kullanıcıların duyarlı tabloları başarıyla uygulamak için tema yapısını anlamaları gerekir. Bazı temalar ek JS kütüphanesi gerektirir. Bu örnek, özel bir CSS kodunun nasıl ekleneceğini gösterir. İlk olarak, görünüşe gidin, sonra özelleştirin, ardından ek CSS. Burada yukarıdaki özel CSS etiketini ekleyebilirsiniz.
Bu kodu kullanmanın en iyi yolu, tablonun göründüğü gönderi veya sayfaya eklemektir. Stil etiketleri arasındaki CSS ve komut dosyası etiketleri arasında JS girin. Kodu düzenleyiciye ekledikten sonra, değişikliğin uygulanması için Publish tuşuna basın. Kodun çalışıp çalışmadığını görmek için bir WordPress ekran muayenesi kullanın. Bu varsayılan test özelliği, içeriği üç farklı büyüklükte ekranda test eder. Veya, CSS kodunu eklediğiniz sayfanın altında, tablonun duyarlı olup olmadığını test etmek ve mobil cihazdaki ekranı görmek için tablet simgesini tıklayın.
HTML ve CSS ile rahat olanlar için, bu duyarlı tablolar yapmak için çok iyi bir çözümdür. Ne yazık ki, bu kodlamaya alışık olmayanlar için zorlu bir çözümdür. Meydana gelen sorunlar varsa, sorunları çözmek ve sorunları çözmek zor olacaktır. Duyarlı bir tablo öğesi yapmanın çok daha hızlı ve daha kolay bir yolu vardır: bir eklenti kullanarak. Duyarlı bir tablo yapmanın daha iyi bir yolu
Yalnızca web sitesine bir grafik veya tablo yerleştirecekseniz, yukarıdaki kod snippet'ini kullanarak çalışır. Ancak, bir tablo düzenli olarak yerleştirecekseniz, duyarlı bir kodu doğrudan temaya gömmek daha iyidir. Herhangi bir kodlamadan tablolar oluşturabilir, yönetebilir, ayarlayabilir ve düzenleyebilirsiniz. Ve en iyi yanı tabloya duyarlıdır. Verilerin kaynağı ne olursa olsun, WPDatatables ile yapılan tablolar varsayılan olarak duyarlıdır. Tablolar herhangi bir cihazda kullanılabilir ve okunabilir. Hangi sütunun gizleneceğini ve mobil cihazda hangi sütunun görülmesi gerektiğini seçebilirsiniz. Ayrıca gizli verileri açılır ve genişletilebilecek bloklar yoluyla kullanılabilir hale getirmeyi de seçebilirsiniz.
WPDatatables ile duyarlı bir tablo oluşturmak üç basit adım gerektirir:
Birinci Adım: Eklentiyi yükleyin
İkinci Adım: Bir Tablo Oluşturun
Üçüncü Adım: Tabloyu bir web sayfasına girin
Bir Veri Tablosu Oluşturun
Eklentiyi yükledikten ve etkinleştirdikten sonra, WPDATATABLE menü öğesi WordPress kontrol panelinde görünecektir. Üstüne tıkla. Ardından tablo oluşturmaya başlamak için yeni ekle düğmesini tıklayın. İstediğiniz tablo türünü seçin. Aşağıdakiler de dahil olmak üzere birkaç seçenek vardır:
Mevcut kaynağa bir tablo alın
Manuel olarak bir masa oluşturun
Diğer kaynaklardan veri içe aktarın
Üçüncü Adım: Tabloyu bir web sayfasına girin
Bir Veri Tablosu Oluşturun
Eklentiyi yükledikten ve etkinleştirdikten sonra, WPDATATABLE menü öğesi WordPress kontrol panelinde görünecektir. Üstüne tıkla. Ardından tablo oluşturmaya başlamak için yeni ekle düğmesini tıklayın. İstediğiniz tablo türünü seçin. Aşağıdakiler de dahil olmak üzere birkaç seçenek vardır:
Mevcut kaynağa bir tablo alın
Manuel olarak bir masa oluşturun
Diğer kaynaklardan veri içe aktarın
Veri kaynağınızı yükleyin. Bundan sonra, masaya benzersiz bir isim verebilirsiniz. Daha sonra veri özniteliklerini düzenleyebilir ve tablo öğelerini ayarlayabilirsiniz.
Varsayılan düzenleme ayarlarını kullanarak renk ve yazı tipi kuvvetini değiştirin. Veya eklenti arayüzüne hızlı bir şekilde özel bir CSS ekleyin.
Tabloyu tamamlamak ve kaydetmek için yeşil düğmeyi tıklayın.Bir değişiklik yaparsanız, sayfadan çıkmadan önce Kaydet düğmesine bastığınızdan emin olun.Düzenlemeyi bitirdikten ve tabloyu ihtiyaçlarınıza göre ayarladıktan sonra kısa kodu kopyalayın.Tablo kısa kodu ekranın üstünde bulunur.Tabloyu bir gönderi veya sayfaya girin
Tabloyu tamamlamak ve kaydetmek için yeşil düğmeyi tıklayın.Bir değişiklik yaparsanız, sayfadan çıkmadan önce Kaydet düğmesine bastığınızdan emin olun.Düzenlemeyi bitirdikten ve tabloyu ihtiyaçlarınıza göre ayarladıktan sonra kısa kodu kopyalayın.Tablo kısa kodu ekranın üstünde bulunur.Tabloyu bir gönderi veya sayfaya girin
