CSS kullanarak bir WordPress tablo stili nasıl yapılır
HTML veri tablolarını WordPress’te düzenlemek, soruna nasıl yaklaştığınıza bağlı olarak kolay ve zorlu olabilir. Birçok tablo eklentisi, tablo renkleri, konumlar, sınırlar vb. Gibi çeşitli ayar ve stil seçenekleri sunar. Ancak masayı CSS ile düzenlemek, gelişmiş kullanıcıları meraklandıran bir şeydir. Genellikle, temel kullanıcıların, sayfalarının iş hedeflerine göre mümkün olduğunca en iyi şekilde görünmesini sağlamak için tabloyu düzenlemek için bir fikre sahip olmaları gerekir. Bu makalede, CSS seçmenleri ile masanın stilini nasıl ayarlayacağına odaklanacağız. Gösteriler için ninja tablosunu seçtik, çünkü varsayılan kuvvet özelliğinin yanı sıra, bu eklentinin de kolay bir CSS ayar seçeneği vardır.
HTML ve CSS arasındaki fark nedir? HTML tablosunun CSS ile nasıl düzenleneceğine dair derinliğe girmeden önce, belki de bu iki terimin gerçek anlamını netleştirmeliyiz. HTML veya “Köprü Metni İşaretleme Dili” temel olarak web sayfası içeriğidir. Sayfadaki metin veya başka bir şey olabilir. HTML tablosunda, tabloları doldurmak için tablolar, ,
NINJA tablolarını kullanarak CSS ile Tablolar Düzenleme Tüm tablolar belirli bir CSS sınıfına ve belirli bir HTML tablo kimliğine sahiptir. Ninja Tabloları bugün önde gelen tablo eklentilerinden biri olduğundan, birçok kullanıcı CSS ile Ninja Tabloları HTML tablosunun nasıl düzenleneceğini bilmek istiyor. Başlıkları, satırları, sütunları vb. Düzenlemek için CSS Kustom Ninja masa paneline stil düzenlemenizi ekleyebilirsiniz. Ninja tablolarında CSS ile tabloların nasıl düzenleneceğine dair bazı örnekler.
Tablo Çizgisi Düzenlemesi
Stil sütunu
Arama çubuğunun aydınlanması
Bonus İpuçları
Not: Özel CSS özellikleri Ninja tablosunun ücretsiz sürümünde mevcut değildir. Stil Kılavuzu’nu kullanmak için Pro’ya Artırın.
İlk olarak, süreci size göstermek için yapay veriler içeren bir tablo yaptık. Tablo kimliği “4615” dir.
Seçmen olarak bir üst kimlik eklemezseniz, #footable_parent_nt_id kullanabilirsiniz. 1. CSS Başlık Tablosu Düzenlemesi Masa başlıkları için CSS Seçmenleri- #footable_parent_id tablo.ninja_table_pro> thead burada, “thead” başlık tablosunu gösterir ve “id” stil yapmak istediğiniz belirli bir tablo kimliğidir. Tablo üstbilgisi içeriğini seçmek için CSS seçmenleri- #footable_parent_id tablo.ninja_table_pro> thead> tr> th olacaktır Önceki tabloda, başlık stilini değiştirmek için özel bir CSS paneli açtık. Örneğin, turuncu bir başlık arka planı ve sarı başlık metni istiyoruz. Tablo kimliğinin ardından CSS-
#Footable_parent_4615 tablo.ninja_table_pro> thead {arka plan rengi: turuncu; Sarı; } Son Kurawal Kuruncap’tan önce daha fazla mülk yazabilirsiniz. Ayrıca yazı tipi stilini ve başlık boyutunu değiştirmek istiyoruz. Yazı tipi boyutu: 35px; Font-Heavy: Kalın; Yazı tipi kuvveti: eğik; Şimdi, özel CSS ve tablo tablolarını kaydedin. Başlık stilinin değiştiğini göreceksiniz. Turuncu başlığın arka planı ve metin sarıdır. Aynı şekilde, boyut ve yazı tipi stili de değişti. Masanızı seçmenleri kullanarak ayarlayabilirsiniz. 2. HTML tablo satırları için CSS tarzı tabloların düzenlenmesi renkleri, yazı tiplerini değiştirebilir ve hatta tek/hatta sıraları seçebilir. Tablo gövdeleri (tbody) ve arka plan satırı ve metin rengi için CSS IS- #footable_parent_4615 tablo.ninja_table_pro> tbody> tr {arka plan rengi: yeşil; Beyaz renk; Yazı tipi boyutu: 20px; } Vücut rengini yeşil ve beyaz metin olarak seçtik. Ayrıca, yazı tipinin boyutu 20px’dir.
Not: Kolaylık için başlık yazı tipi boyutunu azaltın.
Odd/eşit bir çizgi seçmek istiyorsanız, CSS- #footable_parent_4615 tablo kullanın Beyaz renk; } Veya, #footable_parent_4615 tablo.ninja_table_pro> tbody> tr: nth-child (tek) {arka plan rengi: mavi; pembe; }Stil komutunu sakladıktan sonra, değişiklikleri kontrol etmek için önizleme penceresini yeniden açın. Tıpkı komut gibi, garip satır şimdi pembe bir metin ile mavi ve hat beyaz bir metinle bile deniz mavisi. 3. Sütun Kuvvetleri Her tablo sütunun belirli bir CSS sınıfına sahiptir ve bu “ninja_column_columnIndex”. Ninja tablosu için sütun dizininin “0” ile başladığını lütfen unutmayın. Sonuç olarak, ilk sütunu seçmek için kodu “ninja_column_0” olarak yazmamız gerekir. Tek tek sütun düzenleyicisinin Gelişmiş Ayarlar paneline ek CSS sınıfları ekleyebilirsiniz. 4. Bikare aramasının açıklaması Bilah Varsayılan Arama Bilah sağ üst köşede. Tablo tasarım panelindeki “Diğer” sekmesi, sol, orta, sağ, varsayılan olarak istediğiniz konumu seçmenizi sağlar. CSS kodunu kullanarak ortada veya sol tarafta bir arama çubuğu istiyorsanız, bu nasıl-#footable_parent_4615 tablo } CSS’yi ortada bir arama çubuğu ile kaydedin. Veya soldaki konumu değiştirebilirsiniz. Bonus 3 puan bonus: a. Renk kodunuz, arka plan veya yazı tipi için istediğiniz belirli bir renkten renk kodunu girin. Renk adları yazdık, ancak bazen daha parlak bir renk seçmek gibi zahmetli. Böylece, sadece kodu ekleyin ve rengi değiştirmek için güncelleyin. Daha önce olduğundan daha koyu yeşil ve mavi olmayan açık yeşil olmak için tek/eşit satırın arka plan rengini güncelledik. Başlık tablosunu, metni ve satırları bu şekilde herhangi bir renkle renklendirebilirsiniz. Kodu yapıştırın ve güncellemeye basın.
B) CSS Tüm tablolar için bir ipucu daha CSS’nin tüm tablolarda uygulanmasını istiyorsanız, #footable_parent_nt_id yerine “.footable_parent.ninja_table_wrapper” kullanın. c) Arka plan resimleri Bir tablo bir arka plan görüntüsü görüntülemek istiyorsanız, WordPress ortamına seçilen resimler yükleyin ve her CSS koduyla bağlantıları yapıştırın. Sonuç Bu makale, gelişmiş özellikler ve elbette CSS kodundaki etkili kullanıcılar içindir.Değilse, ninja tabloları her stili ve tasarımı daha basit bir şekilde kodsuz işler.Tasarım özelliklerini kullanarak çizgiler, metin veya arka plan renklendirebilirsiniz.Temel özellikleri kullanmak için tabloları daha kolay bir yönde ayarlayabilirsiniz.Ancak masanın CSS ile düzenlenmesi bazen yararlıdır.Yaptığınızda CSS stili hakkında Ninja Tabloları Belgeleri’ne bakın.Bir yerde bir duvara çarparsanız, hepimiz kulaklar!
