HTML5 - Geavanceerde stijlen voor tabellen

Binnen de nieuwe specificaties van HTML5 Y CSS Er zijn verschillende stijlen die op tabellen kunnen worden toegepast om hun gedrag verder te definiëren en aan te passen aan wat we als concept in gedachten hebben om onze pagina's of documenten te maken. De elementen die we kunnen wijzigen zijn de randen van de tabellen, de behandeling van lege cellen, inclusief de opstelling van dezelfde tabel.
grens-instorting
Geeft aan hoe randen worden behandeld in aangrenzende cellen, de waarden die deze eigenschap kan aannemen zijn: instorten Y verschillend.
Met deze eigenschap kunnen we het gedrag bepalen van hoe de browser de randen trekt, laten we eens kijken naar deze afbeelding van hoe de browser het standaard afhandelt:

We zien dat er een rand wordt getekend op de tafel en een andere rand wordt getekend in elke cel van dezelfde, dit genereert een dubbel randeffect, laten we nu kijken hoe met grens-instorting wij kunnen dit probleem aan.

 Voorbeeld 
 Resultaten van de fruitenquête 2011 

 
 
Rang
Yam
Kleur
 
Grootte & Stemmen
 

 

 

 
 
Favoriete:
Appels
Groente
 
Medium
500
 

 
 
2e favoriet:
Sinaasappels
Oranje
 
Groot
450
 

 

 
 
 Fruit Data Enterprises
 

 

 

Laten we eens kijken wat deze code in de browser genereert voordat we verder gaan met de uitleg:

De waarde voor samenvouwen die we in de eigenschap border-collapse plaatsen, vertelt ons dat we niet willen dat er een rand wordt getekend op elk aangrenzend element, wat het effect creëert dat we in de vorige afbeelding zagen.
De afzonderlijke randen instellen
Als in plaats van het gebruik van instorten we gebruiken de afzonderlijke standaardwaarde van de eigenschap border-collapse, we kunnen aanvullende eigenschappen gebruiken zoals grensafstand Laten we het voorbeeld bekijken om de ruimte tussen randen van aangrenzende elementen te definiëren:

 Voorbeeld 
 Resultaten van de fruitenquête 2011 

 
 
Rang
Yam
Kleur
 
Grootte & Stemmen
 

 

 

 
 
Favoriete:
Appels
Groente
 
Medium
500
 

 
 
2e favoriet:
Sinaasappels
Oranje
 
 

 

 
 
Fruit Data Enterprises
 

 

 

In dit voorbeeld specificeren we eenvoudig dat de rand een ruimte van 10 pixels heeft voor de aangrenzende elementen, laten we het voorbeeld bekijken van hoe dit zich vertaalt naar de browser:

Omgaan met lege cellen
Zoals we in de vorige afbeelding zagen, wijst de browser ook een spatie toe met een rand voor lege cellen, dit willen we soms niet in onze tabel, dus we kunnen de volgende wijziging aanbrengen in de vorige code om met lege cellen om te kunnen gaan cellen.

Laten we eens kijken hoe dit eruit ziet in de browser:

We waren inderdaad in staat om de lege cellen te verwijderen zonder het formaat van onze tabel te verliezen.
Hiermee beëindigen we de tutorial, zoals we kunnen zien, kunnen we veel wijzigingen aanbrengen in onze tabellen om ze aan te passen aan wat we kunnen conceptualiseren en aanpassen aan onze behoeften.Vond je deze tutorial leuk en hielp je hem?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven