HTML5 - Avanserte stiler for tabeller

Innenfor de nye spesifikasjonene til HTML5 Y CSS Det er flere stiler som kan brukes på tabeller for ytterligere å definere og tilpasse oppførselen til det vi har som et konsept i tankene våre for å lage våre sider eller dokumenter. Elementene vi kan endre er kantene på tabellene, håndtering av tomme celler, inkludert arrangement av samme bord.
grense-kollaps
Angir hvordan grenser håndteres i tilstøtende celler. Verdiene som denne egenskapen kan anta er: kollapse Y skille.
Med denne egenskapen kan vi kontrollere oppførselen til hvordan nettleseren trekker grensene, la oss se dette bildet av hvordan nettleseren håndterer det som standard:

Vi observerer at en grense er tegnet på bordet og en annen kant er tegnet i hver celle av den samme, dette genererer en dobbel grenseeffekt, la oss se nå hvordan med grense-kollaps vi kan håndtere dette problemet.

 Eksempel 
 Resultater av fruktundersøkelsen 2011 

 
 
Rang
Yam
Farge
 
Størrelse og stemmer
 

 

 

 
 
Favoritt:
Epler
Grønn
 
Medium
500
 

 
 
Andre favoritt:
Appelsiner
oransje
 
Stor
450
 

 

 
 
 Fruktdatabedrifter
 

 

 

La oss se hva denne koden genererer i nettleseren før vi fortsetter med forklaringen:

Kollapsverdien vi plasserer i grensen-kollaps-eiendommen forteller oss at vi ikke vil at det skal tegnes en kant på hvert tilgrensende element, noe som skaper effekten vi så i det forrige bildet.
Innstilling av separate kanter
Hvis i stedet for å bruke kollapse vi bruker den separate standardverdien for grense-kollaps-eiendom, vi kan bruke flere eiendommer som grenseavstand For å definere mellomrommet mellom grenser til tilstøtende elementer, la oss se eksemplet:

 Eksempel 
 Resultater av fruktundersøkelsen 2011 

 
 
Rang
Yam
Farge
 
Størrelse og stemmer
 

 

 

 
 
Favoritt:
Epler
Grønn
 
Medium
500
 

 
 
Andre favoritt:
Appelsiner
oransje
 
 

 

 
 
Fruktdatabedrifter
 

 

 

I dette eksemplet spesifiserer vi ganske enkelt at grensen vil ha et mellomrom på 10 piksler for de tilstøtende elementene. La oss se eksemplet på hvordan dette oversettes til nettleseren:

Håndtering av tomme celler
Som vi så i det forrige bildet, tildeler nettleseren også et mellomrom med en kant for tomme celler. Dette kan være at vi noen ganger ikke vil ha det i tabellen vår, så vi kan gjøre følgende modifisering av den forrige koden for å kunne håndtere tomme celler.

La oss se hvordan dette ser ut i nettleseren:

Vi klarte faktisk å kvitte oss med de tomme cellene uten å miste formatet på bordet vårt.
Med dette fullfører vi opplæringen, som vi kan se kan vi gjøre mange endringer i bordene våre for å tilpasse dem til det vi kan konseptualisere og tilpasse til våre behov.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng