Tableaux - CSS

Noter ce cours :

Les tableaux qui doivent être utilisés pour de la classification de données tabulaires (et non pour de la mise en page) sont personnalisables avec les CSS.

Fusionner deux bordures :

On utilise pour fusionner ou non deux bordures adjacentes la propriété border-collapse.

Cette propriété peut prendre les valeurs suivantes :

  • collapse : "Colle" les deux bordures en une
  • separate : Affiche les deux bordures distinctement.

Exemple :

table{
border-collapse:collapse;
}

Espacement entre les bordures et les cellules :

On utilise pour modifier l'espacement entre les cellules et les bordures la propriété border-spacing.

Exemple :

table{
border-spacing:2px;
}

Afficher les bordures des cellules vides :

Pour afficher ou non les bordures des cellules ne contenant aucun contenu visible on utilise la propriété empty-cells.

Elle peut prendre deux valeurs :

  • show : Les bordures sont affichées.
  • hide : Les bordures ne sont pas affichées.

Exemple :

table{
empty-cells:show;
}

Position de la légende du tableau :

On utilise la propriété caption-side pour modifier la position de la légende du tableau (qui se place dans une balise <legend></legend>).

Elle peut prendre plusieurs valeurs :

  • top : La légende est affichée en haut
  • bottom : La légende est affichée en bas
  • left : La légende est affichée à gauche
  • right : La légende est affichée à droite

Exemple :

table{
caption-side:top;
}

Vous avez aimé cet article intitulé Tableaux - CSS ? Partagez-le !
Vulgarisation-informatique.com
Cours en informatique & tutoriels