HTML5'teki tablolar - bölüm 2

Bu öğreticinin 1. bölümünde stilleri olmayan basit bir salt metin tablosunun nasıl oluşturulacağını zaten gördük, kod düzeyinde bu iyi olsa da, görsel düzeyde bize bir tablonun sağlayabileceği organizasyon gücünü göstermez. veriler, Sitelerimizde birçok kez verileri, öğeleri, genel olarak bilgileri sınıflandırmamız gerekir, bunun için iyi yapılandırılmış ve temsili bir tablo kullanabiliriz.
eleman
eleman NS sütunlarımızı görsel olarak tanımlamak için tablomuza başlıklar oluşturmamıza izin verir. td oğlu tr. Nitelikleri şunlardır: colspan, satır aralığı, kapsam, başlıklar, bu HTML5 spesifikasyonundaki kullanımdan kaldırılan özellikler aşağıdaki gibidir: kısaltma, eksen, hizalama, genişlik, char, charoff, valign, bgcolor, height ve nowrap, kapsam, ayrıntılı olarak bakarsak bu eleman şuna çok benzer şekilde çalışır: td, CSS kuralı aşağıdaki gibidir:

 th {ekran: tablo hücresi; dikey hizalama: devralma; yazı tipi ağırlığı: kalın; metin hizalama: merkez; } 

Şimdi, daha önce yaptığımızdan biraz daha fazla biçimlendirmeye sahip bir tablo oluşturmak için nasıl kullanılacağını görelim:

 Örnek 
 
 
Rütbe
tatlı patates
 
Renk
Boy
 

 
 
Favori:
 
Elmalar
Yeşil
Orta
 

 
 
2. Favori:
 
portakal
turuncu
Büyük
 

 
 
3. Favori:
 
Nar
Bir tür yeşilimsi-kırmızı
 
Ortadan büyüğe değişir
 

 

 

Bu örnekte gördüğümüz gibi elemanı yerleştirebiliriz. NS içinde tr, işlevi şuna benzer td, yalnızca bu başlık oluşturmak için kullanıldığından, gösterilen kod bize sonuç olarak aşağıdaki tabloyu verir:

Tablomuz çok daha iyi görünmeye başlıyor, ancak yine de çok basit ve bilgiler olması gerektiği kadar net değil, örneğin başlıklar ve içerik iyi bir şekilde uyuşmuyor ve görsel olarak hangisi olduğunu ayırt etmek zor. ait olduğu için, CSS kullanacağız ve bu durumu büyük ölçüde nasıl çözeceğimizi göreceğiz.
Bunun için aşağıdakileri kullanacağız:

için iki şartımız var NS, her ikisi de bize çocukları olduklarını söyleyerek başlar. trAncak ilkini hizalaması sola olacak şekilde yerleştiriyoruz, beyaz harflere sahip olacak ve arka planı gri olacak, ikincisinde ise her tr için sadece bir tane olduğunda sağa hizalayacağımızı belirtiyoruz. , daha açık gri bir arka plan yerleştireceğiz ve harfler daha koyu gri olacak.
Ortaya çıkan kodu görelim:

 Örnek [b] [/ b] 
 
 
Rütbe
tatlı patates
Renk
Boy
 

 
 
Favori:
Elmalar
Yeşil
Orta
 

 
 
2. Favori:
portakal
turuncu
Büyük
 

 
 
3. Favori:
Nar
Bir tür yeşilimsi-kırmızı
 
Ortadan büyüğe değişir
 

 

 

Şimdi bu kodun sonucunu görelim ve bu şekilde tablomuzun nasıl çok daha organize olduğunu ve her verinin hangi sütuna ait olduğunu ayırt edebileceğimizi görelim.

Gördüğümüz gibi, bu örnek bize bir masanın nasıl olması gerektiğine dair bir fikir veriyor, ancak yine de mükemmel olmaktan uzak. Örneğin, diğerlerini eklersek ne olur? NS, bilgi satırında? Tablonun yapısını her değiştirdiğinde çalışmamızı sağlayacak olan formatı kaybederiz.
Bundan kaçınmak için, masayı mantıksal olarak bölen 3 unsur vardır, tabiri caizse bunlar: thead, tbody, tfoot. Gördüklerimizle, fazla teorik açıklama yapmadan anlayabiliyoruz, o yüzden bunun pratik bir örneğine geçelim.

 Örnek 
 [B] 

 [/ B] 

 [b] [/ b] 

 [B] 

 [/ B] 
 
Rütbe
tatlı patates
Renk
Boy
 

 
 
Rütbe
tatlı patates
Renk
Boy
 
 
Favori:
Elmalar
Yeşil
Orta
 

 
 
2. Favori:
portakal
turuncu
Büyük
 

 
 
3. Favori:
Nar
 
Bir tür yeşilimsi-kırmızı
Ortadan büyüğe değişir
 

 

 

 

Şimdi bunun sonucunu görelim:

Gördüğümüz gibi, aslında yaptığımız ilk şey bu, şimdi tablonun altında başlığın eşit olduğunu görüyoruz, ancak kodda içeriğin yanı sıra nasıl iki farklı yapı olduğunu gördük.
Bununla HTML5 tabloları öğreticimizi bitiriyoruz, sadece birkaç alıştırma yapmamız ve öğrendiklerimizi uygulamamız gerekiyor.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.