Utilisation de CSS pour ajouter des bordures internes dans un tableau HTML

Vous avez peut-être entendu dire que les tables CSS et HTML ne se mélangent pas. Ce n'est pas le cas. Oui, l'utilisation de tableaux HTML pour la présentation n'est plus une pratique de conception Web car ils ont été remplacés par des styles de présentation CSS, mais les tableaux constituent toujours le balisage approprié à utiliser pour ajouter des données tabulaires à une page Web.

Parce que tant de professionnels du Web craignent les tables, pensant qu'ils ne sont que des ennuis, beaucoup d'entre eux ont peu d'expérience avec cet élément HTML commun et ont du mal à ajouter des lignes internes aux cellules d'un tableau sur une page Web.

Bordures de table CSS

Lorsque vous utilisez CSS pour ajouter des bordures à des 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 attachée au document en tant que feuille de style externe (si le site comporte 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, y compris:

• Entourer toutes les cellules pour former une grille
• Positionner les lignes entre juste les colonnes
• 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.

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 un effet de grille, ajoutez ce qui suit à votre feuille de style:

td, th {bordure: solide 1px noir;}

Comment ajouter des lignes entre les seules colonnes d'un tableau

Pour ajouter des lignes entre les colonnes afin de créer des lignes verticales s'étendant de haut en bas sur les colonnes du tableau, ajoutez ce qui suit à votre feuille de style:

td, th {bordure gauche: noir 1px solide;}

Si vous ne voulez pas que des lignes verticales apparaissent sur la première colonne, vous ajoutez une classe à th et td cellules. Dans cet exemple, supposons une classe de pas de frontière sur ces cellules et supprimer la bordure avec une règle CSS. La classe HTML que vous utilisez est:

class = "no-border">

Ajoutez ensuite le style suivant à la feuille de style:

.pas de frontière {frontière gauche: aucune;}

Comment ajouter des lignes entre les lignes d'une table

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:

tr {bord inférieur: noir 1px plein;}

Pour supprimer la bordure du bas de la table, vous devez encore ajouter une classe à cette

étiquette:

class = "no-border">

Ajoutez le style suivant à votre feuille de style:

.pas de frontière {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 devez utiliser une classe sur ces cellules ou lignes. L'ajout d'une ligne entre les colonnes est légèrement plus difficile qu'entre les lignes car vous devez ajouter la classe à chaque cellule de cette colonne. Si votre table est automatiquement générée à partir d'un CMS, cela risque de ne pas être possible, mais si vous codez manuellement la page, vous pouvez ajouter les classes appropriées en fonction de vos besoins.

class = "side-border">

L'ajout de lignes entre les lignes est plus facile car vous pouvez ajouter la classe à la ligne sur laquelle vous souhaitez placer la ligne.

class = "border-bottom">

Ensuite, ajoutez le CSS à votre feuille de style:

.border-side {bordure gauche: noir 1px solide;}.border-bottom {bord inférieur: noir 1px plein;}

Comment ajouter des lignes autour de cellules individuelles dans une table

Pour ajouter des lignes autour de cellules individuelles, vous ajoutez une classe aux cellules pour lesquelles vous souhaitez placer une bordure:

class = "border">

Ajoutez ensuite le CSS suivant à votre feuille de style:

.border {bordure: solide 1px noir;}

Comment ajouter des lignes à l'intérieur de cellules individuelles dans une table

Si vous souhaitez ajouter des lignes dans le contenu d'une cellule, la méthode la plus simple consiste à utiliser la balise de règle horizontale ().

Conseils utiles

Si vous remarquez des lacunes dans vos bordures, assurez-vous que le style de réduction de la bordure est défini sur la table. Ajoutez ce qui suit à votre feuille de style:

table {effondrement de la bordure: effondrement;}

Vous pouvez éviter tout cela et utiliser l'attribut border dans votre balise de table. Sachez cependant que cet attribut, bien que non déconseillé, est nettement moins flexible que CSS, car vous ne pouvez définir que la largeur de la bordure et ne l’avoir que autour de toutes les cellules du tableau ou à aucun endroit.