Cet article explique comment ajouter des lignes internes aux cellules avec des styles de tableau CSS. Lorsque vous créez une bordure de tableau CSS, elle ajoute uniquement la bordure autour de l'extérieur du tableau.
Bordures de tableau CSS
Lorsque vous utilisez CSS pour ajouter des bordures aux tableaux, il ajoute uniquement la bordure autour de l'extérieur du tableau. Si vous souhaitez ajouter des lignes internes aux cellules individuelles de ce tableau, vous devez ajouter des bordures aux éléments CSS intérieurs. Vous pouvez utiliser la balise HR pour ajouter des lignes à l'intérieur de cellules individuelles.
Pour appliquer les styles abordés dans ce didacticiel, vous avez besoin d'un tableau sur une page Web. Ensuite, vous créez une feuille de style en tant que feuille de style interne dans l'en-tête de votre document (si vous ne traitez qu'une seule page) ou joint au document en tant que feuille de style externe (si le site a plusieurs pages). Vous mettez les styles pour ajouter des lignes intérieures dans la feuille de style.
Avant de commencer
Décidez où vous voulez que les lignes apparaissent dans le tableau. Vous avez plusieurs options, notamment:
- Entourer toutes les cellules pour former une grille
- Positionnement des lignes entre les colonnes uniquement
- Juste entre les rangées
- Entre des colonnes ou des lignes spécifiques.
Vous pouvez également positionner les lignes autour de cellules individuelles ou à l'intérieur de cellules individuelles.
Vous devrez également ajouter le effondrement de la frontière propriété à votre CSS pour votre table. Cela réduira les bordures à une seule ligne entre chaque cellule et permettra aux bordures des lignes du tableau de fonctionner correctement. Avant de faire quoi que ce soit, ajoutez le bloc suivant à votre CSS.
tableau {
border-collapse: effondrement;
}
Comment ajouter des lignes autour de toutes les cellules d'un tableau
Pour ajouter des lignes autour de toutes les cellules de votre tableau, créant ainsi un effet de grille, ajoutez les éléments suivants à votre feuille de style:
Comment ajouter des lignes entre uniquement les colonnes d'un tableau
Pour ajouter des lignes entre les colonnes afin de créer des lignes verticales allant de haut en bas sur les colonnes du tableau, ajoutez les éléments suivants à votre feuille de style:
Si vous ne voulez pas que des lignes verticales apparaissent sur la première colonne, vous pouvez utiliser le premier enfant pseudo-classe pour cibler uniquement les éléments qui apparaissent en premier dans leur ligne et supprimer la bordure.
td: premier-enfant, th: premier-enfant {
bordure gauche: aucune ;
}
Comment ajouter des lignes entre uniquement les lignes d'un tableau
Comme pour l'ajout de lignes entre les colonnes, vous pouvez ajouter des lignes horizontales entre les lignes avec un style simple ajouté à la feuille de style, comme suit:
Pour supprimer la bordure du bas du tableau, vous vous appuieriez à nouveau sur une pseudo-classe. Dans ce cas, vous utiliseriez dernier enfant pour cibler uniquement la dernière ligne.
tr: dernier-enfant {
bordure inférieure: aucune ;
}
Comment ajouter des lignes entre des colonnes ou des lignes spécifiques dans un tableau
Si vous souhaitez uniquement des lignes entre des lignes ou des colonnes spécifiques, vous pouvez utiliser une classe sur ces cellules ou lignes. Si vous préférez un balisage un peu plus propre, vous pouvez utiliser le nième-enfant pseudo-classe pour sélectionner des lignes et des colonnes spécifiques en fonction de leur position.
Par exemple, si vous souhaitez cibler uniquement la deuxième colonne de chaque ligne, vous pouvez utiliser nth-child (2) pour appliquer CSS uniquement au deuxième élément de chaque ligne.
td: nième enfant (2), th: nième enfant (2) {
bordure gauche: solide 2px rouge ;
}
Il en va de même pour les rangées. Vous pouvez cibler une ligne spécifique en utilisant nième-enfant.
tr: nième-enfant (4) {
bordure en bas: solide 2px vert ;
}
Comment ajouter des lignes autour de cellules individuelles dans un tableau
Bien que vous puissiez certainement utiliser des pseudo-classes pour cibler des cellules individuelles, le moyen le plus simple de gérer une telle situation est d'utiliser une classe CSS. Pour ajouter des lignes autour de cellules individuelles, vous ajoutez une classe aux cellules autour desquelles vous souhaitez une bordure:
Ajoutez ensuite le CSS suivant à votre feuille de style:
Comment ajouter des lignes à l'intérieur de cellules individuelles dans un tableau
Si vous souhaitez ajouter des lignes à l'intérieur du contenu d'une cellule, le moyen le plus simple de le faire est d'utiliser la balise de règle horizontale (
Conseils utiles
Si vous préférez contrôler manuellement les écarts entre les cellules de votre tableau, supprimez la ligne suivante:
Cet attribut est idéal pour les tableaux standard, mais il est nettement moins flexible que CSS, car vous ne pouvez définir que la largeur de la bordure et ne pouvez l'avoir qu'autour de toutes les cellules du tableau ou d'aucune.
En savoir plus sur les tableaux CSS et HTML
Vous avez peut-être entendu dire que les tableaux CSS et HTML ne font pas bon ménage. Ce n'est pas le cas. Oui, en utilisant HTML les tableaux pour la mise en page ne sont plus une bonne pratique de conception Web car ils ont été remplacés par des styles de mise en page CSS, mais les tableaux restent le balisage correct à utiliser pour ajouter des données tabulaires à une page Web.
Parce que tant de professionnels du Web évitent les tables en pensant qu'elles ne sont que des ennuis, beaucoup de ces professionnels ont peu d'expérience de travail avec cet élément HTML commun, et ils ont du mal lorsqu'ils doivent ajouter des lignes internes aux cellules de tableau sur un page Web.