Au début du développement Web, les tableaux HTML étaient très simples et manquaient d`options de style étendues. Aujourd`hui, cependant, la plupart des tableaux sont stylisés pour créer une expérience plus esthétique et fonctionnelle pour les utilisateurs.
CSS fournit un ensemble d`attributs de style de tableau. Ces attributs vous permettent, entre autres, de séparer les cellules du tableau, de spécifier les bordures du tableau et de spécifier la largeur et la hauteur du tableau.
Ce didacticiel explique, avec des exemples, comment styliser un tableau à l`aide de CSS . A la fin de ce tutoriel, vous serez un expert.
Tableaux HTML
Le code HTML définit la structure des tableaux. Utilisez la balise
pour définir une table. Les balises
,
et
spécifient respectivement les lignes, les en-têtes de tableau et les cellules de contenu.
Regardons un exemple de tableau HTML. Dans l`exemple ci-dessous, nous avons un tableau répertoriant les cinq meilleurs livres de la liste des best-sellers du New York Times pour la semaine du 23 mars 2020 :
Le code de notre tableau est le suivant :
Ce tableau comporte trois colonnes et six lignes, dont une ligne de `on votre esprit.
Tableaux CSS
Le CSS est utilisé pour styliser les tableaux. Bien que le tableau ci-dessus montre les données de manière organisée, il est écrit en HTML simple (il n`y a pas de styles). En utilisant CSS, vous pouvez améliorer l`apparence des tableaux.
Il existe de nombreuses fonctions CSS que vous pouvez utiliser pour styliser une table. En utilisant CSS, vous pouvez :
ajouter des bordures
compresser les bordures
ajuster l`espacement des bordures
ajuster la largeur et la hauteur d`un tableau
ajouter un rembourrage
aligner le texte horizontalement
aligner le texte verticalement
ajouter la fonction jog mouse (hover)
définir les couleurs des cellules
définir le mode d`affichage des cellules vides
Nous aborderons tous ces sujets dans la discussion ci-dessous.
Bordures
Supposons que nous voulions ajouter des bordures autour du tableau ou autour des éléments qu`il contient.
Pour ajouter des bordures, nous pouvons utiliser la propriété border. Voici un exemple qui utilise la propriété border pour ajouter des bordures à un tableau et à ses cellules, y compris les cellules d`en-tête :
Dans notre code, nous définissons une bordure noire unie de 1 pixel de large. Voici le résultat de notre code :
Notez que notre tableau contient des doubles bordures C`est parce que nous avons appliqué une bordure au tableau lui-même (
), ses en-têtes (
) et ses cellules (
). bordures doubles aux bordures simples, nous pouvons utiliser la propriété border-collapse.
La propriété border-collapse convertit les doubles bordures d`un tableau en bordures simples. La valeur par défaut de la propriété border-collapse est réduite. Si la propriété border-collapse reçoit la valeur collapse , les bordures autour d`un tableau seront réduites.
Voici un exemple de la propriété b command-collapse en action :
Notre code renvoie :
Notre tableau et son contenu ont maintenant une seule bordure.
Border Spac fra
Vous pouvez utiliser la propriété border-spacing pour définir l`espacement entre les cellules d`un tableau. La propriété border-spacing définit l`espacement horizontal et vertical entre cellules - et il le fait dans cet ordre.
Voici un exemple utilisant la propriété border-spacing sur notre tableau initial (celui sans bordures réduites) :
Notre code renvoie :
Chacune de nos cellules a un espacement de 10px sur l`horizontale et bordures verticales.
Largeur et hauteur
Vous pouvez spécifier la largeur et la hauteur d`un tableau et ses propriétés à l`aide des attributs width et height .
Supposons que nous voulions que la largeur de notre tableau au-dessus (celui avec les bordures réduites) soit la largeur de la page Web elle-même, et supposons que nous voulions que la hauteur de chaque en-tête de tableau soit de 30 pixels. Nous pouvons le faire en utilisant le code CSS suivant :
Notre code renvoie :
Comme vous pouvez le voir, notre tableau fait maintenant la largeur de la page Web. De plus, les en-têtes de colonne de notre tableau ont une hauteur de 30 pixels.
Remplissage
Vous pouvez utiliser la propriété padding pour ajouter un espace entre les bords de cellules d`un tableau et le contenu de ces cellules. La propriété padding peut être utilisée sur les balises
et
.
Supposons que nous voulions ajouter un rembourrage de 10 px autour de la cellule contenu de notre tableau, y compris les cellules d`en-tête. Nous pouvons le faire en utilisant ce code :
Notre code renvoie :
Le contenu de chacune des lignes et notre tableau d`en-têtes maintenant avoir un rembourrage de 10px sur tous les bords.
Alignement horizontal du texte
Vous pouvez utiliser la propriété text-align pour aligner le texte stocké dans un ou
dans un tableau. Par défaut, les éléments
sont centrés et les éléments
sont alignés à gauche.
Les valeurs les plus couramment utilisées de l`attribut d`alignement du texte sont :< br>
gauche, centre, droite (pris en charge par tous les navigateurs sauf Microsoft Edge et Internet Explorer)
début et fin (pris en charge par tous les navigateurs sauf Microsoft Edge et Internet Explorer )
Supposons que nous voulions centrer les éléments
dans notre tableau et aligner les éléments
à gauche de chaque cellule. Nous pouvons le faire en utilisant ce code :
Notre code renvoie :
Dans cet exemple, nous avons centré le texte en dehors de la cellule. La cellule d `l`en-tête et le texte de la cellule d`en-tête sont alignés à gauche.
Alignement vertical du texte
CSS La propriété vertical-align est utilisée pour spécifier l`alignement vertical du contenu dans le
ou balise
. Par défaut, la valeur de la propriété d`alignement vertical est définie sur middle , ce qui signifie que le contenu est aligné verticalement au centre de la cellule.
Supposons que nous voulions aligner le texte dans nos cellules
au bas des cellules. Pos nous le faisons en utilisant ce code :
