HTML5 - Avancerade stilar för tabeller

Inom de nya specifikationerna för HTML5 Y CSS Det finns flera stilar som kan tillämpas på tabeller för att ytterligare definiera och anpassa deras beteende till vad vi har som ett koncept i vårt sinne för att göra våra sidor eller dokument, de element som vi kan ändra är kanterna på tabellerna, hantering av tomma celler, inklusive arrangemanget av samma tabell.
gräns-kollaps
Anger hur gränser hanteras i angränsande celler, värdena som den här egenskapen kan anta är: kollaps Y separat.
Med den här egenskapen kan vi kontrollera beteendet för hur webbläsaren drar gränserna, låt oss se den här bilden av hur webbläsaren hanterar det som standard:

Vi observerar att en kant är ritad på bordet och en annan kant är ritad i varje cell av samma, detta genererar en dubbel gräns effekt, låt oss se nu hur med gräns-kollaps vi kan hantera denna fråga.

 Exempel 
 Resultat från fruktundersökningen 2011 

 
 
Rang
Jams
Färg
 
Storlek & röster
 

 

 

 
 
Favorit:
Äpplen
Grön
 
Medium
500
 

 
 
2: a favoriten:
Apelsiner
Orange
 
Stor
450
 

 

 
 
 Fruktdataföretag
 

 

 

Låt oss se vad den här koden genererar i webbläsaren innan vi fortsätter med förklaringen:

Kollapsvärdet som vi placerar i egenskapen border-collapse säger till oss att vi inte vill att en ram ska dras på varje intilliggande element, vilket skapar den effekt vi såg i den föregående bilden.
Inställning av separata kanter
Om istället för att använda kollaps Vi använder det separata standardvärdet för egendom med gränsen kollaps, vi kan använda ytterligare egenskaper som gränsavstånd För att definiera utrymmet mellan gränserna för intilliggande element, låt oss se exemplet:

 Exempel 
 Resultat från fruktundersökningen 2011 

 
 
Rang
Jams
Färg
 
Storlek & röster
 

 

 

 
 
Favorit:
Äpplen
Grön
 
Medium
500
 

 
 
2: a favoriten:
Apelsiner
Orange
 
 

 

 
 
Fruktdataföretag
 

 

 

I det här exemplet anger vi helt enkelt att gränsen kommer att ha ett utrymme på 10 pixlar för de intilliggande elementen, låt oss se exemplet på hur detta översätts till webbläsaren:

Hantering av tomma celler
Som vi såg i den föregående bilden, tilldelar webbläsaren också ett utrymme med en kant för tomma celler, ibland kanske vi inte vill ha det i vår tabell, så vi kan göra följande ändring av den tidigare koden för att kunna hantera tomma celler.

Låt oss se hur detta ser ut i webbläsaren:

Vi kunde verkligen bli av med de tomma cellerna utan att förlora formatet på vårt bord.
Med detta avslutar vi handledningen, som vi kan se kan vi göra många ändringar i våra bord för att anpassa dem till vad vi kan konceptualisera och anpassa efter våra behov.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng