<table> Etiketi Olmadan CSS Kullanarak Duyarlı Tablolar Nasıl Oluşturulur

Veri temsili, herhangi bir web sitesinde çok önemli bir kısımdır. Çok fazla veriye sahipseniz veya yönetiyorsanız, ancak bunları temsil etmenin uygun bir yoluna sahip değilseniz, o zaman kimse tarafından anlaşılmaz ve hiçbir değeri yoktur.

Çoğu durumda, tablo gösterimi önemli bir veri gösterimi türüdür. Özellikle istatistiksel veriler söz konusu olduğunda.

Web tasarımında tablolar geleneksel olarak <table></table> etiketleri kullanılarak oluşturulur. Bir tablo oluşturmak, özellikle endişe onu duyarlı hale getirmek olduğunda, biraz zorlayıcı bir iştir. Ve eğer bir WordPress geliştiricisiyseniz, o zaman biliyor olabilirsiniz, pek çok tema duyarlı tabloları desteklemez. Masaları şekillendirmek de bir meydan okumadır ve fazla seçenek yoktur.

Peki, bu sorunu nasıl aşabiliriz? Çok basit.

Hayır, çözüm JS değil..

Bu sorunu çözmek için bir jQuery eklentisine veya JavaScript eklentisine ihtiyacımız olduğunu düşünüyor olabilirsiniz. Ama öyle değil. Herhangi bir eklenti veya ek çerçeve yüklemeniz gerekmez. Bunu, HTML <div> etiketini ve bazı CSS stillerini kullanarak yapabilirsiniz.

Şaşırdın mı?! Kafası karışmış?! Olma!

Bu makalenin sonunda, iyi yanıt veren HTML tabloları oluşturmada usta olacaksınız! Tüm süreç boyunca size rehberlik edeceğim.

Yani, her şey CSS ile mi ilgili?

Evet.

Sağlanan özel bir özellik nedeniyle sadece CSS kullanarak bunu başarabiliriz. Bu stil sık kullanılmaz ve bu nedenle birçok geliştirici aynı şeyi bilmeyebilir. Display özelliğini kullanabilir ve tüm div'lerimizin otomatik olarak tablo gibi görünmesini sağlamak için bir genişlik sağlayabiliriz.

Bir tabloyu temsil etmek için 'display' özelliği nasıl kullanılır?

Aşağıdaki tablo, aynı öğeyi temsil etmek için bir ' table ' etiketi ile ilgili desteklenen CSS özelliği arasındaki ilişkiyi verir. Bu nedenle, bir tablo oluştururken, tek yapmanız gereken, HTML ' table ' etiketi yerine, sadece ' div ' etiketini kullanmak ve bir tabloyu görüntülemek için ilgili CSS'yi eklemek.

< tablo >	{ ekran :tablo}
< tr >	{ ekran : tablo satırı}
< kafa >	{ ekran : tablo başlığı grubu }
< vücut >	{ ekran : tablo-satır-grubu}
< ayak >	{ display : tablo-altbilgi grubu }
< sütun >	{ ekran : tablo sütunu}
< ortak grup >	{ display : tablo-sütun-grubu}
< td >, < th >	{ ekran : tablo hücresi}
< başlık >	{ ekran : tablo başlığı}

Tablo oluşturma sürecinde size yol gösterecek bir örnek.

Hadi başlayalım.

Temel olarak, bir tablonun tablo başlığı, tablo gövdesi ve tablo altbilgisi olmak üzere 3 ana bölümü vardır. O halde öncelikle bir master div oluşturalım yani içinde tablo oluşturacağımız ana tablo div'i.

Not: Aşağıdaki adımlar için HTML kodunu şablonunuza veya web sitenizdeki bir sayfaya eklemeniz ve CSS kodunu da temanızın style.css dosyasına eklemeniz gerekir.

Adım 1: Tablo için Master Div Oluşturun

HTML Kodu	CSS kodu
< div id = “sorumlu tablo” > </ div >	#solunum tablosu { genişlik : % 100 ; ekran : tablo; }

2. Adım: Bir Tablo Altyazısı Ekleyin

HTML Kodu	CSS kodu
< div id = “resp-table-caption” > Tablo etiketi olmayan Duyarlı Tablo < / div >	#resp-table-caption { ekran : tablo başlığı; metin hizalama : merkez ; yazı tipi boyutu : 30 piksel ; yazı tipi ağırlığı : kalın ; }

3. Adım: Bir Tablo Başlık Satırı Oluşturun

HTML Kodu	CSS kodu
< div id = “resp-table-header” > </ div >	#resp-table-header { ekran : tablo-başlık-grubu ; arka plan rengi : gri ; yazı tipi ağırlığı : kalın ; yazı tipi boyutu : 25 piksel ; }

Adım 4: Tablo Üstbilgi Hücreleri Ekleyin

HTML Kodu	CSS kodu
<div sınıfı = “tablo başlığı hücresi” > Başlık 1 < / böl> <div sınıfı = “tablo başlığı hücresi” > Başlık 2 < / böl> <div sınıfı = “tablo başlığı hücresi” > Başlık 3 < / böl> <div sınıfı = “tablo başlığı hücresi” > Başlık 4 < / böl> <div sınıfı = “tablo başlığı hücresi” > Başlık 5 < / böl>	.table-header-cell { ekran : tablo hücresi; dolgu : 10 piksel ; metin hizalama : yasla ; kenarlık-alt : 1 piksel düz siyah ; }

Adım 5: Tablo Gövdesini Oluşturun

HTML Kodu	CSS kodu
< div id = “resp-table-body” > </ div >	#resp-table-body { display : tablo-satır-grubu; }

Adım 6: Tablo Satırları Oluşturun

HTML Kodu	CSS kodu
<div sınıfı = “resp-table-satır” > < / böl>	.resp-table-satır { ekran : tablo satırı; }

İstediğiniz kadar bir tablo oluşturmak için bu satırları gerektiği kadar çoğaltın.

7. Adım: Satırlarda Tablo Hücreleri Oluşturun

HTML Kodu	CSS kodu
<div sınıfı = “tablo gövdesi-hücresi” > Hücre 1 – 1 < / böl> <div sınıfı = “tablo gövdesi-hücresi” > Hücre 1 – 2 < / böl> <div sınıfı = “tablo gövdesi-hücresi” > Hücre 1 – 3 < / böl> <div sınıfı = “tablo gövdesi-hücresi” > Hücre 1 – 4 < / böl> <div sınıfı = “tablo gövdesi-hücresi” > Hücre 1 – 5 < / böl>	.table-body-cell { ekran : tablo hücresi; }

Bu hücreleri, oluşturduğunuz her satıra kopyalayın.

Adım 8: Tablo Altbilgisini Oluşturun

HTML Kodu	CSS kodu
< div id = “resp-table-footer” > </ div >	#resp-table-footer { display : tablo-altbilgi grubu ; arka plan rengi : gri ; yazı tipi ağırlığı : kalın ; yazı tipi boyutu : 25 piksel ; renk : rgba ( 255, 255, 255, 0.45 ); }

9. Adım: Alt Bilgi Hücreleri Ekleyin

HTML Kodu	CSS kodu
< div sınıfı = "tablo altbilgi hücresi" > altbilgi 1 </ div > < div sınıfı = "tablo altbilgi hücresi" > Altbilgi 2 </ div > < div sınıfı = "tablo altbilgi hücresi" > Altbilgi 3 </ div > < div sınıfı = "tablo altbilgi hücresi" > Altbilgi 4 </ div > < div sınıfı = "tablo altbilgi hücresi" > Altbilgi 5 </ div >	.table-footer-cell { ekran : tablo hücresi; dolgu : 10 piksel ; metin hizalama : yasla ; kenarlık-alt : 1 piksel düz siyah ; }

Bir kez daha, gerektiği kadar hücre oluşturun.

Test Zamanı

Artık HTML sayfasını bir tarayıcıda açarak kod şablonunuzu kontrol edebilirsiniz. Sonuç, bunun satırları etrafında bir şey olmalıdır:

Duyarlılık ne durumda ?

Şimdi, bu tabloyu nasıl duyarlı hale getireceğinizi düşünüyor olabilirsiniz?! Ama çocuklar! Tabloyu zaten duyarlı hale getirdiniz!

İnanmıyor musun? Geliştirici araçlarını kullanarak veya pencereyi yeniden boyutlandırarak aynı sayfanın yanıt verebilirliğini kontrol edin. Şaşırdın mı?

Bütün bunlar, kullandığınız 'görüntüleme' özellikleri sayesinde mümkündür. İçsel olarak bu özellikler duyarlıdır. Bunları doğru bir şekilde uygulamanız yeterlidir. Gerisi tarayıcı ve stil sayfanız tarafından halledilir.

Öyleyse devam edin, tablolar oluşturun ve görüşlerinizi bizimle paylaşın. Oluşturduğunuz tabloları görmek isteriz!