HTML5 - Pokročilé styly pro tabulky

V rámci nových specifikací HTML5 Y CSS Existuje několik stylů, které lze použít na tabulky, aby bylo možné dále definovat a přizpůsobit jejich chování tomu, co máme v mysli jako koncept vytváření našich stránek nebo dokumentů. Prvky, které můžeme upravit, jsou okraje tabulek, manipulace s prázdnými buňkami, včetně uspořádání stejné tabulky.
kolaps hranic
Určuje, jak jsou zpracovávány ohraničení v sousedních buňkách, hodnoty, které tato vlastnost může předpokládat, jsou: kolaps Y samostatný.
S touto vlastností můžeme řídit chování toho, jak prohlížeč kreslí ohraničení, podívejme se na tento obrázek, jak to prohlížeč ve výchozím nastavení zpracovává:

Pozorujeme, že na stole je nakresleno ohraničení a v každé buňce stejné je nakresleno další ohraničení, což generuje efekt dvojitého ohraničení, podívejme se nyní, jak s kolaps hranic tento problém zvládneme.

 Příklad 
 Výsledky průzkumu ovoce 2011 

 
 
Hodnost
Jam
Barva
 
Velikost a hlasy
 

 

 

 
 
Oblíbený:
Jablka
Zelená
 
Střední
500
 

 
 
2. oblíbený:
Pomeranče
oranžový
 
Velký
450
 

 

 
 
 Ovocné datové podniky
 

 

 

Podívejme se, co tento kód generuje v prohlížeči, než budeme pokračovat s vysvětlením:

Hodnota sbalení, kterou vložíme do vlastnosti border-collapse, nám říká, že nechceme, aby se na každý sousední prvek kreslilo ohraničení, což vytváří efekt, který jsme viděli na předchozím obrázku.
Nastavení samostatných hran
Pokud místo použití kolaps používáme samostatnou výchozí hodnotu vlastnosti border-collapse, můžeme použít další vlastnosti jako mezery mezi okraji Abychom definovali prostor mezi okraji sousedních prvků, podívejme se na příklad:

 Příklad 
 Výsledky průzkumu ovoce 2011 

 
 
Hodnost
Jam
Barva
 
Velikost a hlasy
 

 

 

 
 
Oblíbený:
Jablka
Zelená
 
Střední
500
 

 
 
2. oblíbený:
Pomeranče
oranžový
 
 

 

 
 
Ovocné datové podniky
 

 

 

V tomto příkladu jednoduše určíme, že ohraničení bude mít prostor 10 pixelů pro sousední prvky, podívejme se na příklad toho, jak se to překládá do prohlížeče:

Manipulace s prázdnými buňkami
Jak jsme viděli na předchozím obrázku, prohlížeč také přiřadí mezeru s okrajem pro prázdné buňky, což někdy nemusíme chtít v naší tabulce, takže můžeme provést následující úpravu předchozího kódu, abychom se mohli vypořádat s prázdným buňky.

Podívejme se, jak to vypadá v prohlížeči:

Skutečně jsme se mohli zbavit prázdných buněk, aniž bychom ztratili formát naší tabulky.
Tímto tutoriál dokončíme, protože vidíme, že můžeme v našich tabulkách provést mnoho úprav, abychom je přizpůsobili tomu, co můžeme konceptualizovat a přizpůsobit našim potřebám.Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod