HTML5 - Tablolar için Gelişmiş Stiller

Yeni özellikler kapsamında HTML5 Y CSS Sayfalarımızı veya belgelerimizi yapmak için zihnimizde bir kavram olarak sahip olduğumuza göre davranışlarını daha fazla tanımlamak ve ayarlamak için tablolara uygulanabilecek birkaç stil vardır, değiştirebileceğimiz öğeler tabloların kenarlarıdır, aynı tablonun düzenlenmesi de dahil olmak üzere boş hücrelerin işlenmesi.
sınır çökmesi
Bitişik hücrelerde sınırların nasıl işlendiğini belirtir, bu özelliğin alabileceği değerler şunlardır: çöküş Y ayırmak.
Bu özellik ile tarayıcının sınırları nasıl çizdiğinin davranışını kontrol edebiliriz, şimdi tarayıcının varsayılan olarak nasıl işlediğini gösteren bu resmi görelim:

Tablonun üzerine bir bordür çizildiğini ve aynının her hücresine başka bir bordür çizildiğini gözlemliyoruz, bu ikili bir bordür etkisi yaratıyor, şimdi bakalım nasıl ile sınır çökmesi bu sorunu halledebiliriz.

 Örnek 
 2011 Meyve Araştırması Sonuçları 

 
 
Rütbe
tatlı patates
Renk
 
Boyut ve Oylar
 

 

 

 
 
Favori:
Elmalar
Yeşil
 
Orta
500
 

 
 
2. Favori:
portakal
turuncu
 
Büyük
450
 

 

 
 
 Meyve Veri İşletmeleri
 

 

 

Açıklamaya devam etmeden önce bu kodun tarayıcıda ne ürettiğini görelim:

border-collapse özelliğine yerleştirdiğimiz daraltma değeri bize, bir önceki resimde gördüğümüz efekti oluşturan her bitişik öğeye bir sınır çizilmesini istemediğimizi söyler.
Ayrı kenarların ayarlanması
Eğer kullanmak yerine çöküş border-collapse özelliğinin ayrı varsayılan değerini kullanıyoruz, aşağıdaki gibi ek özellikler kullanabiliriz sınır aralığı Bitişik elemanların sınırları arasındaki boşluğu tanımlamak için örneği görelim:

 Örnek 
 2011 Meyve Araştırması Sonuçları 

 
 
Rütbe
tatlı patates
Renk
 
Boyut ve Oylar
 

 

 

 
 
Favori:
Elmalar
Yeşil
 
Orta
500
 

 
 
2. Favori:
portakal
turuncu
 
 

 

 
 
Meyve Veri İşletmeleri
 

 

 

Bu örnekte, kenarlığın bitişik öğeler için 10 piksellik bir alana sahip olacağını basitçe belirtiyoruz, bunun tarayıcıya nasıl çevrildiğini gösteren örneği görelim:

Boş hücreleri işleme
Bir önceki resimde gördüğümüz gibi tarayıcı boş hücreler için bir kenarlıklı bir boşluk da atar, bu bazen tablomuzda istemeyebiliriz, bu yüzden boş ile başa çıkabilmek için önceki kodda aşağıdaki değişikliği yapabiliriz. hücreler.

Bunun tarayıcıda nasıl göründüğüne bakalım:

Nitekim tablomuzun formatını kaybetmeden boş hücrelerden kurtulmayı başardık.
Bununla öğreticiyi bitiriyoruz, gördüğümüz gibi, onları kavramsallaştırabileceğimize uyarlamak ve ihtiyaçlarımıza uyarlamak için tablolarımızda birçok değişiklik yapabiliriz.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.