Style CSS pour les tableaux en HTML
Les tableaux sont des éléments très utilisés en HTML pour afficher des données organisées. Cependant, la mise en forme des tableaux peut être un peu compliquée. Heureusement, les CSS disposent de propriétés spéciales pour styliser les tableaux.
La structure de base d'un tableau en HTML
Un tableau en HTML est composé de balises <table>
, <tr>
, <td>
et <th>
. La balise <table>
sert à définir le début et la fin d'un tableau. La balise <tr>
correspond à une ligne dans un tableau. Enfin, les balises <td>
et <th>
sont utilisées pour définir les cellules dans un tableau. La différence entre les deux balises est que <th>
est utilisé pour les en-têtes de colonnes.
Voici un exemple de code HTML pour créer un tableau basique :
<table>
<tr>
<th>En-tête 1</th>
<th>En-tête 2</th>
</tr>
<tr>
<td>Ligne 1, cellule 1</td>
<td>Ligne 1, cellule 2</td>
</tr>
<tr>
<td>Ligne 2, cellule 1</td>
<td>Ligne 2, cellule 2</td>
</tr>
</table>
Les propriétés CSS pour styliser les tableaux
border
La propriété CSS border
est utilisée pour définir les bordures d'un élément. Pour l'appliquer à un tableau, utilisez la règle suivante :
table {
border: 1px solid black;
}
Cela appliquera une bordure noire d'une épaisseur de 1 pixel à tous les côtés du tableau.
border-collapse
La propriété CSS border-collapse
est utilisée pour spécifier si les bordures des cellules doivent être fusionnées. Cette propriété accepte deux valeurs : separate
(par défaut) et collapse
.
table {
border-collapse: collapse;
}
Le tableau aura des bordures fusionnées et apparaîtra plus propre.
text-align
La propriété CSS text-align
est utilisée pour aligner le contenu des cellules à gauche, à droite ou au centre.
td {
text-align: center;
}
Cela alignera tout le contenu des cellules de données au centre.
background-color
La propriété CSS background-color
est utilisée pour changer la couleur de fond d'un élément.
td {
background-color: #f2f2f2;
}
Cela appliquera une couleur de fond gris clair à toutes les cellules de données.
padding
La propriété CSS padding
est utilisée pour définir l'espace entre le bord de la cellule et son contenu.
td {
padding: 8px;
}
Cela ajoutera un espace de 8 pixels entre le bord de chaque cellule de données et son contenu.
Les exemples de stylisation des tableaux
Exemple 1 : Un tableau simplifié
Voici un exemple simplifié de style CSS pour un tableau :
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
th {
background-color: #666;
color: white;
}
Ce code appliquera une bordure fusionnée, centrera les cellules du corps de tableau, ajoutera un remplissage à 8 pixels et donnera une couleur de fond grise à l'en-tête.
Exemple 2 : Un tableau avec bordure épaisse
table {
border-collapse: collapse;
border: 2px solid black;
width: 100%;
}
th, td {
text-align: center;
padding: 10px;
}
th {
background-color: #666;
color: white;
}
Ici, la bordure du tableau est plus épaisse, centrera toutes les cellules, ajoutera un remplissage de 10 pixels et donnera une couleur de fond grise à l'en-tête.
Exemple 3 : Un tableau avec bordure au survol
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
th {
background-color: #666;
color: white;
}
table tr:hover {
background-color: #f5f5f5;
}
Ici, la couleur de fond des lignes de tableau changera lorsqu'un utilisateur survole une ligne de tableau. Le reste des propriétés CSS sont identiques à l'exemple 1.
Conclusion
Les tableaux sont des éléments très utilisés en HTML et peuvent sembler difficiles à styliser au début. Cependant, avec des propriétés CSS appropriées, nous pouvons facilement styliser les tableaux pour qu'ils correspondent à notre esthétique. En utilisant des propriétés telles que border
, text-align
, background-color
, padding
et border-collapse
, nous pouvons créer des tableaux professionnels et bien stylisés.
Mise en forme des tableaux - Apprendre le développement web | MDN
developer.mozilla.org/fr/do...Mettre en forme un tableau HTML avec du CSS - Pierre Giraud
www.pierre-giraud.com/html-...Habillage de tableaux avec des CSS - OpenWeb - EU.org
openweb.eu.org/articles/tab...Les tableaux et les Css - FAQ CSS - Zone Css
www.zonecss.fr/faq/les-tabl...Les tableaux en HTML et en CSS
www.devenir-webmaster.com/V...Créer un tableau stylé en HTML / CSS - YouTube
www.youtube.com/watch?v=xGB...Styliser vos tabelaux HTML » - Trucsweb.com
www.trucsweb.com/tutoriels/...Tableau Modèles CSS - Nicepage.com
nicepage.com/fr/c/tableau-m...Table d'apparence professionnelle en CSS - Xul.fr
www.xul.fr/css/table.phpTableaux à bordures fines en CSS (table et border) - CSS Débutant
css.mammouthland.net/tablea...Le CSS Tableau est un type de format spécifique qui permet aux concepteurs web de créer des tableaux à l'aide de feuilles de style en cascade (CSS). La mise en page des tableaux CSS est plus simple et plus puissante que celle des tableaux traditionnels, qui repose sur des balises HTML. CSS Tableaux offre plus de contrôle et de flexibilité pour la création d'un look et d'une présentation pour le contenu du tableau.
Avec CSS Tableaux, l'utilisation des styles permet de définir des mises en page structurées. Les propriétés et détails peuvent être ajustés avec précision et permettant d'ajuster plusieurs aspects du tableau, notamment les bordures, les marges, les couleurs, la mise en page et plus encore. Les styles peuvent même être appliqués à des cellules individuelles ou à un groupe de cellules adjacentes, offrant ainsi aux concepteurs plus de contrôle créatif sur la mise en page et la présentation.
En tant que concepteur web, j'ai appris à travailler avec les tableaux CSS à l'université. Ce fût une excellente expérience car cela m'a donné une excellente compréhension des principes du CSS et comment utiliser ces styles pour créer des tableaux efficaces. J'apprécie à quel point le CSS Tableau peut faciliter la création de tableaux attrayants et organisationnels.