✅ HTML5 - Avancerede stilarter til tabeller

Indholdsfortegnelse

Inden for de nye specifikationer af HTML5 Y CSS Der er flere stilarter, der kan anvendes på tabeller for yderligere at definere og tilpasse deres adfærd til det, vi har som et koncept i vores sind for at lave vores sider eller dokumenter, de elementer, vi kan ændre, er kanterne på tabellerne, håndtering af tomme celler, herunder arrangementet af den samme tabel.
grænsekollaps
Angiver, hvordan grænser håndteres i tilstødende celler. Værdierne, som denne egenskab kan antage, er: falde sammen Y adskille.
Med denne egenskab kan vi kontrollere adfærden for, hvordan browseren trækker grænserne, lad os se dette billede af, hvordan browseren håndterer det som standard:

Vi observerer, at der er tegnet en kant på bordet, og en anden kant er tegnet i hver celle af det samme, dette genererer en dobbelt grænseeffekt, lad os nu se, hvordan med grænsekollaps vi kan håndtere dette problem.

 Eksempel 
 Resultater af frugtundersøgelsen i 2011 

 
 Rang Yam Farve  Størrelse og afstemninger 

 

 

 
 Favorit: Æbler Grøn  Medium 500 

 
 2. favorit: Appelsiner orange  Stor 450 

 

 
  Frugtdatavirksomheder

Rang	Yam	Farve	Størrelse og afstemninger
Favorit:	Æbler	Grøn	Medium	500
2. favorit:	Appelsiner	orange	Stor	450
Frugtdatavirksomheder

Lad os se, hvad denne kode genererer i browseren, før vi fortsætter med forklaringen:

Den kollapsværdi, vi placerer i egenskaben border-collapse, fortæller os, at vi ikke ønsker, at der skal tegnes en grænse på hvert tilstødende element, hvilket skaber den effekt, vi så i det forrige billede.
Indstilling af de separate kanter
Hvis i stedet for at bruge falde sammen vi bruger den separate standardværdi for grænseoverskridende ejendom, vi kan bruge yderligere egenskaber som f.eks grænseafstand For at definere rummet mellem grænser for tilstødende elementer, lad os se eksemplet:

 Eksempel 
 Resultater af frugtundersøgelsen i 2011 

 
 Rang Yam Farve  Størrelse og afstemninger 

 

 

 
 Favorit: Æbler Grøn  Medium 500 

 
 2. favorit: Appelsiner orange   

 

 
 Frugtdatavirksomheder

Rang	Yam	Farve	Størrelse og afstemninger
Favorit:	Æbler	Grøn	Medium	500
2. favorit:	Appelsiner	orange
Frugtdatavirksomheder

I dette eksempel specificerer vi ganske enkelt, at grænsen vil have et mellemrum på 10 pixels for de tilstødende elementer, lad os se eksemplet på, hvordan dette oversættes til browseren:

Håndtering af tomme celler
Som vi så i det forrige billede, tildeler browseren også et mellemrum med en kant for tomme celler, dette vil vi nogle gange måske ikke have det i vores tabel, så vi kan foretage følgende ændringer til den tidligere kode for at kunne håndtere tomme celler.

Lad os se, hvordan dette ser ud i browseren:

Vi var faktisk i stand til at slippe af med de tomme celler uden at miste formatet på vores bord.
Med dette afslutter vi selvstudiet, som vi kan se, kan vi foretage mange ændringer i vores borde for at tilpasse dem til det, vi kan konceptualisere og tilpasse til vores behov.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt