Comment styliser un tableau avec CSS pour un impact maximal et se faire remarquer

Vous rencontrerez de nombreux attributs et balises lorsque vous utiliserez le langage HTML (Hypertext Markup Language) et d'autres langages de balisage tels que XML. Les tableaux sont des attributs que vous devriez toujours utiliser pour permettre aux utilisateurs de parcourir, de comparer et d'analyser facilement de grandes quantités de données.

Grâce aux tableaux, les utilisateurs peuvent voir les points clés, les conclusions ou les résultats d'un seul coup d'œil, même sans lire l'article en entier. Vous pouvez utiliser les feuilles de style CSS pour styliser et modifier l'apparence de vos tableaux.

Voici quelques-unes des raisons pour lesquelles vous pourriez avoir besoin de styliser un tableau dans votre application ;

Améliorer l'aspect visuel : Les tableaux ordinaires peuvent être ennuyeux et ordinaires. Le style de ces tableaux améliorera leur apparence et les rendra attrayants pour les utilisateurs.
Améliorer l'accessibilité : Le style des tableaux peut les rendre accessibles même aux personnes handicapées.
Améliorer la lisibilité : Vous pouvez utiliser différentes techniques de stylisation pour permettre aux utilisateurs de parcourir facilement les données présentées dans vos tableaux.
Image de marque : Vous pouvez renforcer l'identité de votre marque en appliquant des polices et des couleurs cohérentes à vos tableaux dans l'ensemble de votre application.
Bon pour les moteurs de recherche : L'organisation de vos données sous forme de tableaux sera utile si vous souhaitez que votre site web soit bien classé dans les moteurs de recherche.

Créer un tableau de base avec HTML

Pour démontrer le fonctionnement d'un tableau en HTML, nous allons créer un dossier de projet, naviguer dans ce dossier et créer deux fichiers : index.html, qui contiendra notre code HTML, et styles.css, qui contiendra notre code CSS (style).

Si vous souhaitez suivre le processus, utilisez les commandes suivantes pour commencer ;

mkdir Styling-HTML-Tables

cd Styling-HTML-Tables

touch Styling-HTML-Tables

Vous avez maintenant le dossier du projet de base pour vous aider à créer des tableaux HTML. Je souhaite vous présenter différents langages de programmation, leurs cas d'utilisation et des exemples d'entreprises utilisant ces langages.

Pour créer un tableau HTML, toutes les données doivent être incluses dans la balise <table>...</table>.

Dans votre fichier HTML, générez la structure de base d'un document HTML. Ajoutez ce code dans la balise <body>.

<table>

 <tr>

 <th>Langue</th>

 <th>Utilisations courantes</th>

 <th>Entreprises utilisatrices</th>

 </tr>

 <tr> <td>Langue</th> <td>Entreprises utilisatrices</th> </tr> <tr>

 <td>Java</td>

 <td>Applications web, applications Android, applications d'entreprise</td>

 <td>Google, Amazon, LinkedIn</td>

 </tr>

 <tr>

 <td>Python</td>

 <td>Science des données, développement web, automatisation</td>

 <td>Google, Dropbox, Spotify</td>

 </tr>

 <tr>

 <td>JavaScript</td>

 <td>Web dev, front-end dev, browser scripting</td>

 <td>PayPal, Facebook, Netflix</td>

 </tr>

 <tr>

 <td>C </td>

 <td>Développement de jeux, programmation de systèmes, systèmes intégrés</td>

 <td>Tesla, Microsoft, Adobe</td>

 </tr>

 <tr>

 <td>Swift</td>

 <td>développement iOS, développement macOS</td>

 <td>Pomme</td>

 </tr>

 <tr>

 <td>PHP</td>

 <td>Développement web, script côté serveur, CMS</td>

 <td>WordPress, Wikipedia, Yahoo</td>

 </tr>

 </table&gt>

Si vous examinez attentivement ce tableau, vous remarquerez quelques autres balises incluses dans la balise <table>: <tr>, <th> et <td>.

Ces balises ont les fonctions suivantes ;

<tr>, ligne de tableau, est incluse dans l'élément <table>. La balise <tr> peut contenir un ou plusieurs éléments <th> et <td>.
<th>, en-tête de tableau, est contenu dans la balise <tr>. Par défaut, son contenu est en gras.
<td> , données du tableau, décrit le contenu des données dans les cellules du tableau.

Lorsque vous effectuerez le rendu du code que nous avons écrit ci-dessus, notre navigateur affichera ce tableau ;

Propriétés CSS utilisées pour styliser les tableaux

Le tableau que nous avons créé ci-dessus est entièrement fonctionnel. Cependant, il laisse beaucoup à désirer car il n'est pas bien stylé. Pour obtenir les styles souhaités et rendre le tableau visuellement attrayant, nous utiliserons les CSS.

Vous vous souvenez du fichier CSS que nous avons créé ? Il est maintenant temps de l'utiliser. Cependant, vous devez d'abord importer votre fichier CSS dans votre fichier HTML pour que le style fonctionne. Nous avons nommé notre fichier CSS styles.css. Dans la section <head> de votre document HTML, ajoutez ce qui suit ;

<link rel="stylesheet" href="styles.css">

Nous sommes maintenant prêts à styliser notre tableau. Nous pouvons le styliser comme suit ;

#1. Bordure

Nous pouvons ajouter une bordure tout autour des cellules de notre tableau. Pour ce faire, nous allons définir une propriété de bordure sur les éléments <th> et <td>. Nous pouvons fixer la bordure à 2px.

th, td {

 border : 2px solid orange ;

 }

Nous avons fixé la valeur de la bordure à 2 et ajouté l'orange comme couleur.

Lorsque vous rendez la nouvelle page, vous verrez ce qui suit ;

#2. Fermeture de la bordure

Si vous examinez la capture d'écran ci-dessus, vous remarquerez qu'il y a des espaces entre les bordures de chaque cellule. La propriété border-collapse détermine si les cellules adjacentes d'un tableau doivent partager une bordure.

Si vous souhaitez que les cellules partagent une bordure, ajoutez ce code à votre fichier CSS ;

table {

 border-collapse : collapse ;

}

Lorsque vous rendez votre page, vous pouvez voir que les cellules partagent des bordures comme suit ;

Si vous souhaitez que les cellules aient des bordures différentes, ajoutez ce code à votre fichier CSS ;

table {

 border-collapse : separate ;

}

La page rendue apparaîtra comme suit ;

#3. Espacement des bordures

En utilisant la propriété border-space, nous pouvons créer un petit espace entre les cellules de notre tableau. Nous définissons la règle à l'intérieur de la classe table dans notre fichier CSS.

Pour que cette propriété fonctionne, nous devons utiliser la propriété border-collapse : separate ;.

Notre classe de tableau peut se présenter comme suit ;

table {

 border-collapse : separate ;

 border-spacing : 3px ;

 }

Les bordures des cellules ont un espace de 3px.

Lorsque vous effectuez le rendu du tableau, il apparaît comme suit ;

#4. Disposition du tableau

La propriété Table-layout détermine la nature du tableau. Vous pouvez avoir des tableaux qui ont toujours la même longueur. D'autre part, vous pouvez également créer des tableaux qui changent en fonction du contenu.

Si vous souhaitez que les cellules aient des tailles similaires, vous pouvez définir la propriété table-layout comme étant fixe.

table-layout : fixed ;

Notre code final pour la classe de tableau sera le suivant ;

table {

 border-collapse : collapse ;

 border-spacing : 3px ;

 table-layout : fixed ;

 }

Si nous voulons que les cellules changent en fonction du contenu, nous pouvons remplacer la propriété table-layout par auto.

table-layout : auto ;

La classe de tableau finale dans notre code CSS sera ;

Vérifiez la dernière cellule du tableau et notez que j'ai ajouté ces mots : MailChimp et bien plus encore.

Vous pouvez maintenant voir que les cellules de la dernière ligne sont plus grandes que les autres, car la disposition du tableau est flexible en fonction du contenu.

Le style que nous avons abordé jusqu'à présent concernait l'ensemble du tableau. Nous pouvons maintenant nous concentrer sur des classes individuelles en modifiant les propriétés de couleur d'arrière-plan, de police et d'alignement du texte pour les lignes, les cellules ou les en-têtes.

Nous pouvons styliser ces propriétés comme suit ;

#5. Couleur d'arrière-plan

Nous pouvons changer l'arrière-plan de notre rangée supérieure en jaune-vert. Nous pouvons utiliser le pseudo-sélecteur de classe :first-child pour atteindre nos objectifs.

Ajoutez ce code à votre code CSS ;

tr:first-child {

 background-color : yellowgreen ;

 }

Le code final affiché sera le suivant ;

#6. Police

Nous pouvons modifier le style ou la taille de la police de certaines lignes, colonnes ou cellules de notre tableau.

Nous allons cibler le contenu de la dernière colonne de notre page (Entreprises utilisant) pour modifier le style de police.

Nous mettrons en italique tout le contenu de cette colonne en ciblant le sélecteur de classe td:last-child. Vous pouvez ajouter le code suivant à votre fichier CSS ;

td:last-child {

 font-style : italic ;

}

Le résultat final sera le suivant lorsque vous rechargerez la page rendue ;

Nous pouvons également modifier la couleur et la taille de la police de la première colonne pour la rendre unique.

Ajoutez le code suivant à votre fichier CSS ;

tr td:first-child {

 color : red ;

 font-size : x-large ;

 font-weight : bolder ;

 }

Lors du rendu de votre page, vous constaterez que le contenu de la première colonne (Langue) a une taille de police plus grande, est de couleur rouge et est en caractères plus gras.

Comment rendre le tableau réactif

Le tableau que nous avons créé peut ne pas être adapté aux petits écrans. Vous pouvez utiliser les outils de développement de Chrome ou un outil externe comme celui-ci pour tester la réactivité de votre code.

Il existe plusieurs approches possibles, mais nous n'en aborderons qu'une seule.

Suivez les étapes suivantes ;

Définissez la largeur de l'élément <table> dans votre code ;

table {

 width : 100% ;

 border-collapse : collapse ;

 table-layout : fixed ;

}

Mettez un coupe-mot sur td et th pour que les mots longs soient dans la cellule.

th, td {

 border : 2px solid orange ;

 word-break : break-word ;

 }

Meilleures pratiques pour styliser les tableaux

Le CSS peut être amusant, surtout quand on le connaît. Voici quelques-unes des meilleures pratiques pour vous assurer que vous obtenez le meilleur lorsque vous stylisez vos tableaux ;

Utilisez une feuille de style externe : Nous avions la possibilité d'utiliser un style en ligne, mais nous avons opté pour une feuille de style externe. Nous avons pu réutiliser notre style dans différents tableaux, ce qui a permis de réduire le temps de développement.
Restez simple : Vous pouvez vous laisser emporter et styliser à outrance vos tableaux. Cependant, conservez toujours une conception simple et faites en sorte que vos tableaux puissent être scannés et lus.
Ajoutez des bordures à vos tableaux : Une bordure facilite la lecture et le balayage d'un tableau.
Utilisez des couleurs cohérentes : si vous avez plusieurs tableaux sur vos pages web, veillez à utiliser des couleurs et des polices cohérentes. L'utilisation des couleurs de votre marque peut en améliorer la visibilité.
Faites en sorte que vos tableaux soient réactifs : vous ne connaîtrez peut-être jamais la taille de l'écran des appareils des utilisateurs finaux.
Utilisez des légendes pour décrire vos tableaux : La légende décrit brièvement le contenu du tableau.
Utilisez des espaces blancs pour séparer vos tableaux : Si plusieurs tableaux se suivent, ajoutez des espaces blancs et légendez-les en conséquence.

Conclusion

Je pense que vous savez maintenant créer et styliser un tableau HTML de base. Il se peut que nous n'ayons pas tout couvert, car les langages HTML et CSS sont très vastes. Vous pouvez créer des tableaux plus petits ou plus grands, en fonction de la nature des données que vous souhaitez capturer.

Consultez les feuilles de calcul CSS si vous souhaitez en savoir plus sur les CSS et sur la manière de les utiliser pour améliorer votre interface utilisateur.

Titus Kamunya

Auteur