HTML - Table Styling

Bonjour là-bas, futurs développeurs web ! Je suis ravi de vous guider sur ce voyage passionnant dans le monde du stylisme des tables HTML. En tant que quelqu'un qui enseigne l'informatique depuis des années, je peux vous dire que maîtriser le stylisme des tables, c'est comme apprendre à peindre - ça commence par comprendre votre toile et vos outils. Alors, plongeons dedans et rendons ces tables magnifiques !

Table HTML Normale

Avant de commencer à ajouter du style à nos tables, rappelons-nous à quoi ressemble une table HTML de base. Voici un exemple simple :

<table>
<tr>
<th>Entête 1</th>
<th>Entê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>

Ce code crée une table de base avec deux colonnes et trois lignes (y compris la ligne d'en-tête). C'est fonctionnel, mais soyons honnêtes, c'est aussi passionnant que de regarder de la peinture sécher. C'est là que l'ajout de style entre en jeu !

Styles de Table HTML

Maintenant, parlons des différentes façons dont nous pouvons styliser nos tables. Pensez à ces méthodes comme aux pinceaux et aux couleurs dans votre boîte à outils de conception web :

Propriété	Description
border	Définit la bordure autour de la table et des cellules
border-collapse	Détermine si les bordures des cellules sont fusionnées en une seule bordure ou séparées
width	Définit la largeur de la table
height	Définit la hauteur de la table
text-align	Aligne le texte dans les cellules (gauche, droite, centre)
vertical-align	Aligne le texte verticalement dans les cellules (haut, milieu, bas)
padding	Définit l'espace entre la bordure de la cellule et son contenu
background-color	Définit la couleur de fond de la table ou des cellules
color	Définit la couleur du texte
font-family	Définit la police pour le texte
font-size	Définit la taille du texte

Exemples de Stylisme de Table HTML

Mettons ces propriétés en action avec quelques exemples. Je vous promets, à la fin de cela, vous styliserez les tables comme un pro !

Exemple 1 : Stylisme de Table de Base

<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>

<table>
<tr>
<th>Nom</th>
<th>Âge</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
</tr>
</table>

Dans cet exemple, nous avons ajouté un peu de stylisme de base. La propriété border-collapse: collapse fusionne les bordures des cellules, créant un aspect plus net. Nous avons défini la largeur de la table à 100% de son conteneur, ajouté des bordures aux cellules, inclus un peu de padding, et donné un arrière-plan gris clair à l'en-tête. C'est comme donner à votre table une coupe nette et une chemise fraîche !

Exemple 2 : Rayures Zébrées

<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>

<table>
<tr>
<th>Produit</th>
<th>Prix</th>
</tr>
<tr>
<td>Pomme</td>
<td>$1.00</td>
</tr>
<tr>
<td>Banane</td>
<td>$0.75</td>
</tr>
<tr>
<td>Orange</td>
<td>$0.90</td>
</tr>
</table>

Ici, nous avons introduit le concept de rayures zébrées. Le sélecteur tr:nth-child(even) cible les lignes paires et leur donne un arrière-plan gris clair. Cette alternance de couleurs rend plus facile pour les utilisateurs de suivre les lignes à travers la table. C'est comme donner à votre table un costume à rayures stylé !

Exemple 3 : Table Réactive

<style>
.responsive-table {
overflow-x: auto;
}
table {
border-collapse: collapse;
width: 100%;
min-width: 600px;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
}
@media screen and (max-width: 600px) {
th, td {
display: block;
}
tr {
margin-bottom: 15px;
}
th {
text-align: center;
}
}
</style>

<div class="responsive-table">
<table>
<tr>
<th>Nom</th>
<th>Poste</th>
<th>Bureau</th>
<th>Âge</th>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>Architecte Système</td>
<td>Édimbourg</td>
<td>61</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Comptable</td>
<td>Tokyo</td>
<td>63</td>
</tr>
</table>
</div>

Cet exemple introduit la réactivité à notre table. Sur les écrans plus grands, elle se comporte comme une table normale. Mais sur les écrans plus petits (moins de 600px de large), elle passe à un layout de type carte où chaque cellule est affichée comme un bloc. C'est comme enseigner à votre table à faire du yoga - elle devient flexible et s'adapte à différentes tailles d'écran !

Conclusion

Et voilà, les amis ! Nous avons transformé nos tables de simples et ennuyeuses à stylées et réactives. Souvenez-vous, styliser les tables, c'est tout au sujet d'améliorer la lisibilité et l'expérience utilisateur. C'est aussi fun de les rendre jolies !

Alors que vous continuez votre voyage en développement web, continuez à expérimenter avec différents styles. Peut-être essayez d'ajouter des effets de survol aux lignes, ou jouez avec des schemas de couleurs différents. Les possibilités sont infinies !

Tout comme un bon repas n'est pas complet sans la bonne présentation, un document HTML bien structuré n'est pas complet sans des tables correctement stylisées. Alors, allaitez ces tables ! Et souvenez-vous, dans le monde du développement web, la pratique fait la maîtresse. Bon codage !

Credits: Image by storyset