CSS - Tables

Bienvenue, futurs développeurs web ! Aujourd'hui, nous plongeons dans le monde des tables CSS. En tant que votre professeur de sciences informatiques du coin, je suis excité de vous guider à travers ce voyage. Les tables peuvent sembler old-school, mais croyez-moi, elles sont toujours incroyablement utiles dans le design web moderne. Alors, mettons nos manches et c'est parti !

CSS Tables - Collapse des Bordures

Imaginez que vous construisez une clôture autour de votre jardin. Vous voulez que les poteaux de la clôture se touchent, non ? C'est exactement ce que fait border-collapse pour les bordures des tables. Il détermine si les bordures des cellules doivent être séparées ou fusionnées en une seule bordure.

table {
border-collapse: collapse;
}

Ce code fera toucher les bordures de votre table, créant un aspect propre et unifié. C'est comme donner à votre table une coupe nette !

CSS Tables - Espacement des Bordures

Maintenant, que faire si vous voulez un peu d'espace entre vos cellules de table ? C'est là que border-spacing entre en jeu. C'est comme la distanciation sociale pour vos cellules de table !

table {
border-spacing: 5px;
}

Cela ajoutera un écart de 5 pixels entre vos cellules. Vous pouvez même définir un espacement horizontal et vertical différents :

table {
border-spacing: 5px 10px;
}

Ici, nous avons 5 pixels d'espacement horizontal et 10 pixels d'espacement vertical. C'est comme donner à vos cellules de table un peu d'espace personnel !

CSS Tables - Côté du Légende

Les tables peuvent avoir des légendes, et vous pouvez contrôler où ces légendes apparaissent en utilisant caption-side. C'est comme décider de placer le titre d'un livre en haut ou en bas de la couverture.

caption {
caption-side: bottom;
}

Cela placera votre légende de table en bas. Vous pouvez également utiliser top si vous préférez qu'elle soit en haut.

CSS Tables - Cellules Vides

Vous vous êtes déjà demandé ce qui se passe avec les cellules vides dans votre table ? La propriété empty-cells vous permet de décider de les afficher ou de les masquer.

table {
empty-cells: hide;
}

Cela rend les cellules vides invisibles. C'est comme jouer à cache-cache avec vos cellules de table !

CSS Tables - Mise en Page de la Table

La propriété table-layout détermine comment les cellules, les lignes et les colonnes de la table sont mises en page. C'est comme choisir entre un plan de siège strict et une free-for-all à une fête de dîner.

table {
table-layout: fixed;
}

Cela définit une mise en page de table fixe, ce qui peut améliorer la vitesse de rendu pour les grandes tables.

CSS Table - avec Mise en Page Fixe

Avec une mise en page fixe, la largeur de la table est déterminée par la première ligne ou les largeurs spécifiées. C'est comme avoir des places assignées à une réception de mariage.

table {
table-layout: fixed;
width: 100%;
}

th, td {
width: 25%;
}

Cela crée une table avec quatre colonnes de largeur égale, indépendamment du contenu.

CSS Table - avec Mise en Page Automatique

Une mise en page automatique ajuste les largeurs des colonnes en fonction de leur contenu. C'est comme laisser les invités choisir leurs propres places à une fête de dîner décontractée.

table {
table-layout: auto;
width: 100%;
}

Ici, le navigateur ajustera les largeurs des colonnes en fonction de leur contenu.

CSS Tables - Hauteur et Largeur

Vous pouvez contrôler la taille de votre table et de ses cellules en utilisant les propriétés height et width. C'est comme décider combien de grande votre table à manger devrait être.

table {
width: 100%;
}

td {
height: 50px;
}

Cela définit la largeur de la table à 100% de son conteneur et la hauteur de chaque cellule à 50 pixels.

CSS Tables - Alignement de la Table

Aligner le contenu à l'intérieur des cellules de table est crucial pour la lisibilité. C'est comme disposer la nourriture sur une assiette - la présentation compte !

td {
text-align: center;
vertical-align: middle;
}

Cela centre le contenu horizontalement et verticalement dans chaque cellule.

CSS Tables - Bordure

Les bordures peuvent rendre votre table plus visuellement attrayante et plus facile à lire. C'est comme dessiner des lignes sur une feuille de papier pour organiser les informations.

table, th, td {
border: 1px solid black;
}

Cela ajoute une bordure de 1 pixel de couleur noire solide à la table et à toutes ses cellules.

CSS Tables - Couleur de Fond

Ajouter des couleurs de fond peut rendre votre table plus visuellement attrayante et aider à distinguer différentes parties de la table. C'est comme peindre les chambres de votre maison en différentes couleurs.

table {
background-color: #f2f2f2;
}

th {
background-color: #4CAF50;
color: white;
}

Cela définit une couleur de fond gris clair pour la table et une couleur de fond verte avec du texte en blanc pour les cellules d'en-tête.

CSS Tables - Styles de police

Styliser le texte dans votre table peut grandement améliorer la lisibilité. C'est comme choisir la bonne police pour un livre - cela peut faire toute la différence dans l'expérience de lecture.

table {
font-family: Arial, sans-serif;
}

th {
font-weight: bold;
}

td {
font-size: 14px;
}

Cela définit Arial comme police pour toute la table, rend le texte des en-têtes gras et définit la taille de police des cellules à 14 pixels.

CSS Tables - Autres Styles

Il y a beaucoup d'autres styles que vous pouvez appliquer aux tables. Voici un aperçu rapide :

Propriété	Description	Exemple
padding	Espace à l'intérieur des cellules	td { padding: 10px; }
border-radius	Coins arrondis	table { border-radius: 5px; }
box-shadow	Effet d'ombre	table { box-shadow: 2px 2px 5px grey; }
opacity	Transparence	table { opacity: 0.8; }

CSS Tables - Marges

Les marges peuvent donner à votre table un peu d'espace par rapport aux autres éléments sur la page. C'est comme laisser un peu d'espace autour d'un cadre de photo sur un mur.

table {
margin: 20px auto;
}

Cela ajoute une marge de 20 pixels en haut et en bas de la table, et la centre horizontalement.

CSS Tables - Séparateurs (verticaux / horizontaux)

Vous pouvez ajouter des séparateurs à votre table pour séparer les colonnes ou les lignes. C'est comme utiliser une règle pour dessiner des lignes droites dans un cahier.

td, th {
border-right: 1px solid black;
}

tr {
border-bottom: 1px solid black;
}

Cela ajoute des lignes verticales entre les colonnes et des lignes horizontales entre les lignes.

CSS Tables - Tableau à Rayures

Les tables à rayures peuvent rendre la lecture des lignes de données plus facile. C'est comme surligner chaque autre ligne dans un livre pour garder votre place.

tr:nth-child(even) {
background-color: #f2f2f2;
}

Cela crée des rangées blanches et gris clair alternées dans votre table.

CSS Tables - Tableau Réactif

Rendre les tables réactives garantit qu'elles ont bonne allure sur tous les appareils. C'est comme avoir une table à manger qui peut s'agrandir ou se rétracter en fonction du nombre d'invités.

@media screen and (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}

thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

tr { border: 1px solid #ccc; }

td {
border: none;
position: relative;
padding-left: 50%;
}

td:before {
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
content: attr(data-label);
}
}

Ce code transforme la table en un format similaire à une liste sur les petits écrans, rendant la lecture plus facile sur les appareils mobiles.

CSS Table - Propriétés Associées

Voici un tableau des propriétés CSS associées que vous pourriez trouver utiles lors de la manipulation des tables :

Propriété	Description
border-collapse	Détermine si les bordures des cellules sont séparées ou fusionnées
border-spacing	Définit l'écart entre les bordures des cellules
caption-side	Spécifie l'emplacement de la légende de la table
empty-cells	Définit si les bordures sur les cellules vides sont affichées
table-layout	Définit l'algorithme utilisé pour la mise en page des cellules, des lignes et des colonnes de la table
vertical-align	Définit l'alignement vertical du contenu dans une cellule
text-align	Définit l'alignement horizontal du contenu dans une cellule

Et voilà ! Vous êtes maintenant bien équipé pour créer et styliser des tables en CSS. Souvenez-vous, la pratique rend parfait, alors n'ayez pas peur d'expérimenter avec ces propriétés. Bon codage !

Credits: Image by storyset