HTML5 - Styles avancés pour les tableaux

Dans le cadre des nouvelles spécifications de HTML5 Oui CSS Il existe plusieurs styles qui peuvent être appliqués aux tableaux afin de définir davantage et d'ajuster leur comportement à ce que nous avons comme concept en tête pour faire nos pages ou documents, les éléments que nous pouvons modifier sont les bords des tableaux, les manipulation des cellules vides, y compris la disposition de la même table.
effondrement de la frontière
Spécifie comment les bordures sont gérées dans les cellules adjacentes, les valeurs que cette propriété peut prendre sont : s'effondrer Oui séparé.
Avec cette propriété, nous pouvons contrôler le comportement de la façon dont le navigateur dessine les bordures, voyons cette image de la façon dont le navigateur le gère par défaut :

Nous observons qu'une bordure est dessinée sur le tableau et qu'une autre bordure est dessinée dans chaque cellule du même, cela génère un effet de double bordure, voyons maintenant comment avec effondrement de la frontière nous pouvons gérer ce problème.

 Exemple 
 Résultats de l'enquête sur les fruits 2011 

 
 
Rang
patate douce
Couleur
 
Taille et votes
 

 

 

 
 
Favori:
Pommes
Vert
 
Moyen
500
 

 
 
2e favori :
Des oranges
Orange
 
Grande
450
 

 

 
 
 Entreprises de données sur les fruits
 

 

 

Voyons ce que ce code génère dans le navigateur avant de poursuivre l'explication :

La valeur de réduction que nous plaçons dans la propriété border-collapse nous indique que nous ne voulons pas qu'une bordure soit dessinée sur chaque élément adjacent, ce qui crée l'effet que nous avons vu dans l'image précédente.
Réglage des bords séparés
Si au lieu d'utiliser s'effondrer nous utilisons la valeur par défaut distincte de la propriété border-collapse, nous pouvons utiliser des propriétés supplémentaires telles que espacement des frontières Afin de définir l'espace entre les bordures des éléments adjacents, voyons l'exemple :

 Exemple 
 Résultats de l'enquête sur les fruits 2011 

 
 
Rang
patate douce
Couleur
 
Taille et votes
 

 

 

 
 
Favori:
Pommes
Vert
 
Moyen
500
 

 
 
2e favori :
Des oranges
Orange
 
 

 

 
 
Entreprises de données sur les fruits
 

 

 

Dans cet exemple, nous spécifions simplement que la bordure aura un espace de 10 pixels pour les éléments adjacents, voyons l'exemple de la traduction dans le navigateur :

Gestion des cellules vides
Comme nous l'avons vu dans l'image précédente, le navigateur attribue également un espace avec une bordure pour les cellules vides, cela peut parfois ne pas être souhaité dans notre tableau, nous pouvons donc apporter la modification suivante au code précédent pour pouvoir gérer les vides cellules.

Voyons à quoi cela ressemble dans le navigateur :

En effet, nous avons pu nous débarrasser des cellules vides sans perdre le format de notre tableau.
Avec cela, nous terminons le tutoriel, comme nous pouvons le voir, nous pouvons apporter de nombreuses modifications à nos tableaux afin de les adapter à ce que nous pouvons conceptualiser et adapter à nos besoins.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif