ev borcu WordPress sitesi
CSS ve HTML veya WordPress: Duyarlı Tablolar Oluşturmak İçin Kullanın
Çoğu kişi, önemli bilgileri ve verileri depolamak için genellikle bir HTML tablosu kurar. Bu tablolar ayrıca bir web sayfasının, özellikle de WordPress platformunun oluşturulmasında önemli bir rol oynar.
Bu nedenle, web sitenizi yetkin bir şekilde tasarlamak istiyorsanız, önce duyarlı tablolar oluşturma yöntemlerini bilmeniz gerekir.
Ancak, farklı amaçlara hizmet eden farklı HTML tabloları vardır. Bu nedenle, onlar hakkında her şeyi anlamanıza yardımcı olmak için burada WordPress, CSS ve HTML ile duyarlı tabloların oluşturma prosedüründen bahsedeceğiz.
Duyarlı Tablolar ve Duyarlı Tasarım Nedir?
Duyarlı tablolar hakkında daha fazla bilgi edinmek istiyorsanız, 'duyarlı tasarım' terimini anlamanız gerekir. Farklı ekran boyutlarına göre ayarlanabilen bir tasarım türüdür.
Duyarlı bir tablo ile daha küçük ekranlı cihazların kullanıcıları verileriniz üzerinden oldukça rahat bir şekilde geçebilecekler.
Duyarlı Tabloların Kalıpları Nelerdir?
Duyarlı tasarım tanıtıldığından beri, duyarlı tablolar oluşturmak neredeyse herkes için oldukça zorlaştı. Veri tabloları genellikle daha geniş bir boyuta sahip olduğundan, anlaşılmasını kolaylaştırmak için her zaman tek bir satırdaki verileri bir arada tutmalısınız. İşte size bu konuda yardımcı olabilecek üç model.
1. Öncelik Tabloları
Öncelik tabloları, düşük boyutlu ekranlarda ekranı gizleme özelliğine sahiptir. Bu oluşum ile yapılan tablolar genel olarak oldukça güzel ve görsel olarak estetik görünmektedir. Ancak, hariç tutulan alanlar en önemli olanlarsa, bu model sizin için biraz sorunlu olabilir.
2. Yatay Taşma
Yatay Taşma modeli, sizin ve başkalarının bir tablonun verilerini oldukça rahat bir şekilde görmenize yardımcı olabilir. Bunun için ekranın sağına ve soluna kaydırmanız yeterli olacaktır. Bu modelde, birinci alan genellikle sabit bir konumda kalır. Yani tablonun diğer kısımlarını sadece kaydırdığınızda görebilirsiniz.
Ancak, bunun için bir yakalama var. Tablonun kaydırılabilir olduğunu bilmiyorsanız veya anlamıyorsanız, onu uygun şekilde göremezsiniz. Bu olursa, tablonun önemli kısımlarını kaçırabilirsiniz.
3. Geçiş Tablosu
Duyarlı tablolar okurken veya oluştururken kaydırma zahmetinden kaçınmak istiyorsanız, o zaman bir geçiş tablosu sizin için en iyi çözüm olabilir.
Bu model ile sütun yapısını tercih etmek yerine tabloyu satır formatında yapabilirsiniz. Bu nedenle, izleyicilerin tüm içeriği verimli bir şekilde izlemesi daha kolay hale gelir.
Ne yazık ki, bu modelin bir dezavantajı da var. Geçiş tablosu ile alan karşılaştırması veya tarama yapamazsınız.
Duyarlı Tablolar Nasıl Yapılır?
Sorumlu bir tabloyu çeşitli şekillerde yapabilirsiniz. Bunlardan bazıları.
Sütunlara Göre Daralt: Tablonuzu sütunlara göre daraltmayı düşünüyorsanız, işaretlemeyi veya karikatürü JavaScript ile değiştirmeniz gerekir. Bu nedenle, bu yöntemi seçmeden önce HTML'yi doğru bir şekilde öğrenmeniz gerekir.
Squash: Tablonuzun sütunları fazla bilgi taşımıyorsa, yatay olarak ezebilirsiniz. Tablonun tüm düzenini değiştirmekten kaçınmanıza yardımcı olacaktır.
Satırlara Göre Daralt: Daha basit ve okunması kolay görünmesi için tablonuzun satırlarını birkaç ayrı parçaya bölebilirsiniz.
Dikey Kaydırma: İçeriğinizin yapısını değiştirmek istemiyorsanız dikey kaydırma seçeneğini de tercih edebilirsiniz.
Duyarlı Tablo Oluştururken Kaçınmanız Gerekenler
Başından beri, insanlar duyarlı tablolar oluşturmak için çeşitli yöntemler denediler. Ancak, hepsi özellikle etkili değildi. İşte bu bölümde bunlardan bazılarından bahsedeceğiz.
Daha dar tablolar oluşturmak için asla JavaScript kullanmamalısınız. Önceden oluşturulmuş tablolarınıza dahil ettiğiniz tüm benzersiz kimlikleri ortadan kaldıracaktır.
Tablonuzu yeniden düzenlemek için standart tablo işaretlemesini ve JavaScript'i birlikte kullanmayın. Sizin için oldukça karmaşık ve zor olabilen birkaç işaretleme ve DOM manipülasyonu gerektirir.
Bunların yanı sıra, tablo değiştirme ve işaretlemeyi asla görüntüleme için tutmamalısınız.
Farklı Platformlar için Duyarlı Tablolar Nasıl Oluşturulur?
Aşağıda, farklı platformlarda duyarlı tablolar oluşturmanıza yardımcı olabilecek bazı yollar verilmiştir.
1. WordPress için wpDataTables
wpDataTables, veri yönetimi, çizelgeler ve tablolarla oldukça zahmetsizce çalışmanıza yardımcı olabilecek WordPress için en çok satan eklentilerden biridir. 17.000'den fazla şirket ve kuruluş şu anda ticari, finansal, istatistiksel ve bilimsel çalışmalarını tamamlamak için bu eklentiyi kullanıyor.
2. Vakıf için Duyarlı Tablo
Foundation için duyarlı bir tablo oluşturmak istiyorsanız, kodlama yöntemini kullanmanız gerekir. İşte Foundation üzerinde oluşturabileceğiniz duyarlı bir tablo örneği.
Şimdi, bunu HTML, CSS ve JS yardımıyla yapmak istiyorsanız, HTML'de aşağıdaki kodu kullanmanız gerekir.
Fondötenli Duyarlı Tablo
<div class="row">
<div class="küçük-12 sütun">
<table Özet="Bu tablo, Foundation'ın genişletilmiş işlevselliğini kullanarak uyumlu tabloların nasıl oluşturulacağını gösterir" class="responsive">
<caption>Duyarlı tablo örneği
<a href="https://zurb.com/playground/responsive-tables" target="_blank" rel="noopener noreferrer">Temel</a>:</caption>
<kafa>
<tr>
<th>Ülke</th>
<th>Diller</th>
<th>Nüfus</th>
<th>Ortanca Yaş</th>
<th>Alan (Km²)</th>
</tr>
</thead>
<vücut>
<tr>
<td>Arjantin</td>
<td>İspanyolca (resmi), İngilizce, İtalyanca, Almanca, Fransızca</td>
<td>41.803.125</td>
<td>31,3</td>
<td>2.780,387</td>
</tr>
<tr>
<td>Avustralya</td>
<td>İngilizce %79, ana dil ve diğer diller</td>
<td>23.630.169</td>
<td>37,3</td>
<td>7.739.983</td>
</tr>
<tr>
<td>Yunanistan</td>
<td>Yunanca %99 (resmi), İngilizce, Fransızca</td>
<td>11.128.404</td>
<td>43,2</td>
<td>131.956</td>
</tr>
<tr>
<td>Lüksemburg</td>
<td>Lüksermburgca (ulusal) Fransızca, Almanca (her ikisi de idari)</td>
<td>536.761</td>
<td>39,1</td>
<td>2,586</td>
</tr>
<tr>
<td>Rusya</td>
<td>Rusça, diğerleri</td>
<td>142.467,651</td>
<td>38,4</td>
<td>17.076.310</td>
</tr>
<tr>
<td>İsveç</td>
<td>İsveççe, küçük Sami ve Fince konuşan azınlıklar</td>
<td>9.631.261</td>
<td>41,1</td>
<td>449.954</td>
</tr>
</tbody>
<tayak>
<tr>
<td colspan="5" class="text-center">Veriler <a href="http://www.infoPlease.com/ipa/A0855611.html" target="_blank" rel="noopener noreferrer" adresinden alındı >bilgi lütfen</a> ve
<a href="http://www.worldometers.info/world-population/population-by-country/" target="_blank" rel="noopener noreferrer">dünyaölçerler</a>.</td>
</tr>
</tayak>
</tablo>
</div>
</div>
<p class="p">George Martsoukos'un demosu.
<a href="http://www.sitepoint.com/responsive-data-tables-comprehensive-list-solutions" target="_blank" rel="noopener noreferrer">Makaleye bakın</a>.</p>
İşiniz bittiğinde, bu kodu CSS'ye yazmanız gerekir.
h3 {
dolgu: 20 piksel 0;
metin hizalama: merkez;
yazı tipi boyutu: 1.9em;
}
tablo {
genişlik: %100;
kenar boşluğu: 0;
}
tablo başlığı {
yazı tipi boyutu: .9em;
dolgu: .5em 0;
}
tablo başlığı,
tablo tfoot tr td {
yazı tipi ağırlığı: normal;
}
@medya ekranı ve (maksimum genişlik: 766 piksel) {
tablo başlığı {
görüntü yok;
}
}
.P {
metin hizalama: merkez;
üst dolgu: 140 piksel;
yazı tipi boyutu: 14 piksel;
}
Bundan sonra, görevinizi tamamlamak için bu kodu JS üzerinde uygulamanız gerekir.
// responsive-tables.js
$(belge).hazır(işlev() {
var anahtarlı = yanlış;
var updateTables = function() {
if (($(pencere).width() 767)) {
anahtarlanmış = yanlış;
$("table.responsive").each(function(i, element) {
unsplitTable($(eleman));
});
}
};
$(pencere).load(updateTables);
$(window).on("redraw",function(){switched=false;updateTables();}); // Dinlenecek bir olay
$(pencere).on("yeniden boyutlandır", updateTables);
işlev splitTable(orijinal)
{
orijinal.wrap("<div class='table-wrapper' />");
var kopya = orijinal.clone();
copy.find("td:not(:ilk-çocuk), th:not(:ilk-çocuk)").css("ekran", "yok");
copy.removeClass("responsive");
orijinal.closest(".table-wrapper").append(kopya);
copy.wrap("<div class='sabitlenmiş' />");
orijinal.wrap("<div class='kaydırılabilir' />");
setCellHeights(orijinal, kopya);
}
işlev unsplitTable(orijinal) {
orijinal.closest(".table-wrapper").find(".pinned").remove();
orijinal.unwrap();
orijinal.unwrap();
}
function setCellHeights(orijinal, kopya) {
var tr = orijinal.find('tr'),
tr_copy = kopyala.find('tr'),
yükseklikler = [];
tr.each(işlev (dizin) {
var self = $(bu),
tx = self.find('th, td');
tx.each(işlev () {
var yükseklik = $(bu).outerHeight(true);
yükseklikler[indeks] = yükseklikler[indeks] || 0;
if (yükseklik > yükseklikler[indeks]) yükseklikler[indeks] = yükseklik;
});
});
tr_copy.each(işlev (dizin) {
$(bu).yükseklik(yükseklikler[indeks]);
});
}
});
$(pencere).on('yük yeniden boyutlandırma', function () {
if ($(bu).width() < 767) {
$(#039;tablo tfoot#039;).hide();
} Başka {
$(#039;tablo tfoot#039;).show();
}
});
3. Bootstrap için FooTable
FooTable, HTML tablolarınızı duyarlı ve genişletilebilir tablolara dönüştürebilen bir JQuery eklentisi türüdür. Bazı belirli veri sütunlarını farklı çözünürlüklerde gizleyebilir, bu da sırayla satırları genişletir ve tüm verilerini ortaya çıkarır. FooTable ile ilgili en iyi şeylerden biri, Bootstrap olmadan da çalışmasıdır.
4. jQuery için Duyarlı Tablolar
İşte jQuery için duyarlı tablolar oluşturmanıza yardımcı olabilecek bazı tablolar.
json Verileri ile: json verileriyle bir tablo oluşturmak için aşağıdaki kodu yazmanız gerekir.
<!-- Google yazı tipleri --> <!-- Açıklama --> <h1 class="açıklama"> Json verileriyle duyarlı tablo. </h1> <!-- Tablo demosu --> <div class="box-table"> <table data-fn="contacts" data-url="https://codepen.io/nakome/pen/DnEvr.js"></table> </div>
Temel Tablo: Temel tablo, jQuery için duyarlı tablolar oluşturmanıza yardımcı olabilecek hafif ve basit bir tablo kitaplığıdır. Ücretsiz bir araçtır ve çok sayıda duyarlı tablo yapısıyla birlikte gelir.
Materyal Tasarımı Duyarlı Tablosu: Bu tablo yapısını IE 11, Chrome 37, Opera 25, Firefox 32 ve Safari 5.1.7 gibi çeşitli tarayıcılarda kullanabilirsiniz. Bootstrap projelerinde de uygulayabilirsiniz.
5. CSS için Duyarlı Tablolar:
CSS ile çalışıyorsanız, işte size yardımcı olabilecek bazı seçenekler.
CSS Flexbox: CSS Flexbox, CSS ile duyarlı tablolar oluşturmak için özel olarak yapılmış bir tablo düzeni modülüdür.
Responsive Table: Kodlama yöntemlerini kullanarak CSS ile responsive tablo da oluşturabilirsiniz. Bu yöntemle yapılan masanın düzeni ayarlanabilir, bu da onu cep telefonundan görüntüleyen kişiler için harika olabilir.
Simple Responsive Table: CSS ile responsive tablolar yapmak için en bilinen modellerden biridir.
Çözüm
Çoğu WordPress kullanıcısı, bunun genellikle duyarlı tasarım çağı olduğunu düşünür. Bu nedenle, verilerinizin okunmasını ve anlaşılmasını kolaylaştırmak için tablolarınızın tasarımını da sorumlu tutmanız gerekir. Ancak, yukarıda belirtilen tüm ipuçlarını takip ederseniz, kesinlikle işinizle ilgili herhangi bir sorun yaşamazsınız.