Lorsque vous manipulez du HTML (Hypertext Markup Language) ou d’autres langages de balisage comme le XML, vous rencontrerez de nombreux attributs et balises. Parmi ceux-ci, les tableaux sont essentiels pour permettre aux utilisateurs de consulter, comparer et analyser aisément d’importants volumes de données.
Grâce aux tableaux, les informations clés, conclusions ou résultats sont visibles d’un simple coup d’œil, sans nécessiter la lecture complète du texte. L’aspect de ces tableaux peut être personnalisé à l’aide de CSS.
Voici quelques raisons pour lesquelles il peut être nécessaire de styliser un tableau dans votre application :
- Amélioration de l’esthétique visuelle : Des tableaux basiques peuvent paraître monotones et peu attrayants. En les stylisant, on peut améliorer leur aspect et les rendre plus engageants pour l’utilisateur.
- Accessibilité améliorée : Des tableaux bien stylisés peuvent être rendus accessibles, même pour les personnes ayant des handicaps.
- Lisibilité accrue : Différentes techniques de style peuvent faciliter la consultation des données présentées dans les tableaux.
- Image de marque : L’application de polices et couleurs uniformes à travers vos tableaux contribue à renforcer l’identité de votre marque.
- Optimisation pour les moteurs de recherche : L’organisation des données en tableaux peut améliorer le référencement de votre site web.
Création d’un tableau HTML simple
Pour illustrer la création d’un tableau en HTML, nous allons créer un dossier de projet, nous y déplacer, puis créer deux fichiers : `index.html`, pour notre code HTML, et `styles.css`, pour notre code CSS (style).
Pour suivre cette démonstration, utilisez les commandes suivantes :
mkdir Styling-HTML-Tables
cd Styling-HTML-Tables
touch index.html styles.css
Vous disposez désormais d’un dossier de projet pour créer vos tableaux HTML. Nous allons présenter différents langages de programmation, leurs utilisations courantes et quelques entreprises les utilisant.
Pour créer un tableau HTML, toutes les données doivent être placées à l’intérieur de la balise
.
Dans votre fichier HTML, créez la structure de base d’un document HTML, puis ajoutez le code suivant à l’intérieur de la balise :
<table>
<tr>
<th>Langage</th>
<th>Utilisations courantes</th>
<th>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>Développement web, développement front-end, script de navigateur</td>
<td>PayPal, Facebook, Netflix</td>
</tr>
<tr>
<td>C++</td>
<td>Développement de jeux, programmation système, systèmes embarqués</td>
<td>Tesla, Microsoft, Adobe</td>
</tr>
<tr>
<td>Swift</td>
<td>Développement iOS, développement macOS</td>
<td>Apple</td>
</tr>
<tr>
<td>PHP</td>
<td>Développement web, script côté serveur, CMS</td>
<td>WordPress, Wikipedia, Yahoo</td>
</tr>
</table>
En examinant attentivement ce code, vous remarquerez d’autres balises à l’intérieur de
:
,
et
.
Ces balises ont les fonctions suivantes :
Si vous visualisez ce code dans un navigateur, vous obtiendrez un tableau simple, mais fonctionnel.
Propriétés CSS pour la mise en forme des tableaux
Le tableau créé est fonctionnel, mais visuellement peu attrayant. Pour le rendre plus esthétique, nous allons utiliser CSS.
Il est temps d’utiliser le fichier `styles.css` créé précédemment. Pour que le style fonctionne, il faut d’abord importer ce fichier CSS dans votre fichier HTML. Dans la section <head> de votre document HTML, ajoutez :
<link rel="stylesheet" href="styles.css">
Nous sommes maintenant prêts à styler notre tableau. Voici comment nous allons procéder :
#1. Bordures
Nous pouvons ajouter une bordure autour des cellules du tableau. Pour ce faire, définissez la propriété `border` pour les éléments <th> et <td>. Nous allons définir une bordure de 2 pixels.
th, td {
border: 2px solid orange;
}
Nous avons défini la largeur de la bordure à 2px et la couleur en orange.
Après cette modification, vous remarquerez des bordures autour de chaque cellule du tableau.
#2. Fusion des bordures
Vous remarquerez que des espaces apparaissent entre les bordures des cellules. La propriété `border-collapse` permet de décider si les bordures des cellules adjacentes doivent être partagées.
Pour partager les bordures, ajoutez le code suivant à votre fichier CSS :
table {
border-collapse: collapse;
}
Les cellules vont maintenant partager leurs bordures.
Pour des bordures séparées, vous pouvez utiliser :
table {
border-collapse: separate;
}
Les cellules auront des bordures individuelles.
#3. Espacement des bordures
La propriété `border-spacing` permet de créer un espace entre les cellules du tableau. Elle est appliquée à l’élément `table`.
Pour que `border-spacing` fonctionne, la propriété `border-collapse` doit être définie sur `separate`.
table {
border-collapse: separate;
border-spacing: 3px;
}
Les bordures des cellules sont espacées de 3 pixels.
#4. Disposition du tableau
La propriété `table-layout` définit le comportement de votre tableau. Vous pouvez choisir des tableaux dont la largeur reste constante, ou des tableaux dont la largeur s’adapte au contenu.
Pour des cellules de largeur identique, utilisez : `table-layout: fixed;`.
table {
border-collapse: collapse;
border-spacing: 3px;
table-layout: fixed;
}
Pour des cellules dont la taille s’adapte au contenu, utilisez `table-layout: auto;`.
table {
border-collapse: collapse;
table-layout: auto;
}
Vous pouvez constater que la taille de la dernière ligne s’adapte maintenant à son contenu, qui inclut « MailChimp et bien plus encore ».
Jusqu’à présent, le style était appliqué à l’ensemble du tableau. Nous pouvons désormais nous concentrer sur des éléments individuels : lignes, cellules ou en-têtes, en modifiant la couleur de fond, la police et l’alignement du texte.
#5. Couleur de fond
Pour changer la couleur de fond de la première ligne, utilisez le sélecteur de pseudo-classe `:first-child`:
tr:first-child {
background-color: yellowgreen;
}
#6. Police de caractères
Il est possible de modifier le style ou la taille de la police de lignes, colonnes ou cellules spécifiques.
Pour mettre en italique le contenu de la dernière colonne (« Entreprises utilisatrices »), ciblez le sélecteur de classe `td:last-child`:
td:last-child {
font-style: italic;
}
Pour modifier la couleur et la taille de la police de la première colonne, utilisez:
tr td:first-child {
color: red;
font-size: x-large;
font-weight: bolder;
}
Le contenu de la première colonne (« Langage ») est maintenant plus grand, rouge et en gras.
Comment rendre un tableau réactif
Les tableaux peuvent poser problème sur les petits écrans. Les outils de développement de votre navigateur ou des outils externes peuvent vous aider à tester la réactivité de votre code.
Il existe plusieurs méthodes, mais nous n’en examinerons qu’une seule.
Suivez ces étapes :
- Définissez la largeur de l’élément
<table>dans votre code :
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
th, td {
border: 2px solid orange;
word-break: break-word;
}
Bonnes pratiques pour la mise en forme de tableaux
CSS peut être amusant, surtout quand on le maîtrise. Voici quelques bonnes pratiques pour optimiser la mise en forme de vos tableaux :
- Utiliser une feuille de style externe : Nous aurions pu utiliser du style en ligne, mais nous avons opté pour une feuille externe. Cela permet de réutiliser le style sur différents tableaux, ce qui réduit le temps de développement.
- Rester simple : On peut être tenté d’en faire trop et de surcharger les tableaux. Cependant, il faut toujours privilégier un design simple, qui rend les tableaux lisibles et faciles à parcourir.
- Ajouter des bordures : Les bordures facilitent la lecture et la consultation d’un tableau.
- Utiliser des couleurs cohérentes : Si vous avez plusieurs tableaux sur vos pages web, assurez-vous d’utiliser des couleurs et des polices uniformes. Utiliser les couleurs de votre marque peut améliorer sa visibilité.
- Rendre les tableaux réactifs : Vous ne savez jamais quelle sera la taille de l’écran des appareils des utilisateurs.
- Utiliser des légendes pour décrire vos tableaux: Les légendes décrivent brièvement le contenu du tableau.
- Utiliser des espaces blancs pour séparer vos tableaux : Si plusieurs tableaux se suivent, ajoutez des espaces blancs et légendez-les de manière appropriée.
Conclusion
Vous savez maintenant comment créer et styliser un tableau HTML de base. HTML et CSS sont vastes, et nous n’avons pas tout abordé. Vous pouvez créer des tableaux plus petits ou plus grands, en fonction des données à afficher.
Si vous souhaitez approfondir vos connaissances en CSS, consultez les feuilles de référence CSS.