HTML - Tables: Your Gateway to Structured Web Content

Bonjour là-bas, futurs développeurs web ! Aujourd'hui, nous allons plonger dans le merveilleux monde des tables HTML. En tant que votre enseignant bienveillant en informatique, je suis excité de vous guider dans ce parcours. Faites-moi confiance, à la fin de ce tutoriel, vous serez en mesure de créer des tables comme un pro !

Why Tables are Used in HTML ? (Pourquoi les tables sont-elles utilisées en HTML ?)

Imaginez que vous essayez d'organiser vos livres préférés, leurs auteurs et dates de publication. Vous pourriez les écrire tous dans un paragraphe, mais ce serait désordonné et difficile à lire. C'est là que les tables HTML viennent à la rescousse !

Les tables HTML nous permettent de présenter les données de manière structurée et en forme de grille. Elles sont parfaites pour :

1. Afficher les données tabulaires (comme les tableaux de bord)
2. Créer des layouts nets pour le contenu
3. Organiser les informations de manière facile à lire

How to Create a Table in HTML ? (Comment créer une table en HTML ?)

Commençons avec les bases. Créer une table en HTML est comme construire avec des briques LEGO. Vous commencez avec la base et ajoutez des pièces jusqu'à ce que vous ayez votre chef-d'œuvre.

Voici un exemple simple :

<table>
<tr>
<th>Titre du Livre</th>
<th>Auteur</th>
<th>Année de Publication</th>
</tr>
<tr>
<td>To Kill a Mockingbird</td>
<td>Harper Lee</td>
<td>1960</td>
</tr>
<tr>
<td>1984</td>
<td>George Orwell</td>
<td>1949</td>
</tr>
</table>

Reprenons cela :

• <table> : Cette balise indique au navigateur, "Eh, je commence une table ici !"
• <tr> : Cela signifie "ligne de table". C'est comme commencer une nouvelle ligne dans votre table.
• <th> : C'est une "en-tête de table". Elle est utilisée pour les titres de vos colonnes.
• <td> : Cela signifie "données de table". C'est où vous mettez les informations réelles de votre table.

All About HTML Tables (Tout sur les tables HTML)

Maintenant que nous avons les bases, explorons quelques fonctionnalités plus passionnantes des tables HTML !

Define an HTML Table (Définir une table HTML)

Lorsque vous définissez une table, imaginez-la comme un plan. Vous devez clairement dessiner sa structure. Voici un exemple avec quelques attributs supplémentaires :

<table border="1" cellpadding="5" cellspacing="0">
<caption>_mes Livres Préférés</caption>
<thead>
<tr>
<th>Titre</th>
<th>Auteur</th>
<th>Genre</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Great Gatsby</td>
<td>F. Scott Fitzgerald</td>
<td>Classique</td>
</tr>
<tr>
<td>The Hunger Games</td>
<td>Suzanne Collins</td>
<td>Young Adult</td>
</tr>
</tbody>
</table>

Dans cet exemple :

• border="1" ajoute une bordure autour des cellules de la table.
• cellpadding="5" ajoute un peu d'espace à l'intérieur de chaque cellule.
• cellspacing="0" supprime l'espace entre les cellules.
• <caption> ajoute un titre à votre table.
• <thead> groupe le contenu de l'en-tête.
• <tbody> groupe le contenu du corps.

Styling HTML Table (Styliser une table HTML)

Souvenez-vous quand nous décorions nos cahiers d'école ? Eh bien, styliser les tables HTML est assez similaire ! Ajoutons un peu de couleur :

<table style="border-collapse: collapse; width: 100%;">
<tr style="background-color: #f2f2f2;">
<th style="border: 1px solid #dddddd; text-align: left; padding: 8px;">Nom</th>
<th style="border: 1px solid #dddddd; text-align: left; padding: 8px;">Âge</th>
</tr>
<tr>
<td style="border: 1px solid #dddddd; text-align: left; padding: 8px;">John Doe</td>
<td style="border: 1px solid #dddddd; text-align: left; padding: 8px;">25</td>
</tr>
</table>

Ici, nous utilisons du CSS en ligne pour styliser notre table. C'est comme donner à chaque partie de votre table son propre habillement unique !

Table Background Color & Image (Couleur et image d'arrière-plan de la table)

Vous voulez que votre table se démarque ? Ajoutons un peu de style :

<table style="background-color: #e6f7ff; background-image: url('paper.gif');">
<tr>
<th>Colonne 1</th>
<th>Colonne 2</th>
</tr>
<tr>
<td>Donnée 1</td>
<td>Donnée 2</td>
</tr>
</table>

Cette table aura un arrière-plan bleu clair avec un calque d'image en texture de papier. C'est comme donner à votre table sa propre fête thématique !

Table Width and Height (Largeur et hauteur de la table)

Comme nous ajustons notre espace de travail, nous pouvons définir les dimensions de notre table :

<table style="width: 100%; height: 200px;">
<tr>
<td style="width: 30%;">Cette cellule occupe 30% de la largeur de la table</td>
<td>Cette cellule s'ajuste pour remplir le reste</td>
</tr>
</table>

Cette table s'étendra sur toute la largeur de son conteneur et sera de 200 pixels de hauteur. La première cellule sera toujours de 30% de la largeur totale.

Nested HTML Table (Table imbriquée)

Parfois, vous avez besoin d'une table à l'intérieur d'une autre table. C'est comme ces poupées russes, mais avec des données !

<table border="1">
<tr>
<td>
Cellule principale
<table border="1">
<tr>
<td>Cellule de table imbriquée 1</td>
<td>Cellule de table imbriquée 2</td>
</tr>
</table>
</td>
<td>Une autre cellule principale</td>
</tr>
</table>

Cela crée une table à l'intérieur d'une cellule d'une autre table. C'est parfait pour des structures de données complexes !

HTML Tables Related Tags (Balises liées aux tables HTML)

Résumons toutes les balises liées aux tables que nous avons apprises dans un tableau net :

Balise	Description
<table>	Définit une table
<tr>	Définit une ligne de table
<th>	Définit une en-tête de table
<td>	Définit une cellule de table
<caption>	Définit un titre de table
<thead>	Groupe le contenu de l'en-tête dans une table
<tbody>	Groupe le contenu du corps dans une table
<tfoot>	Groupe le contenu du pied de page dans une table
<colgroup>	Spécifie un groupe d'une ou plusieurs colonnes dans une table pour le formatage
<col>	Spécifie les propriétés de colonne pour chaque colonne à l'intérieur d'un élément <colgroup>

Video - HTML Tables (Vidéo - Tables HTML)

Bien que je ne puisse pas intégrer une vidéo directement ici, je vous recommande vivement de rechercher "Tutoriel Tables HTML" sur YouTube. Voir les tables être construites en temps réel peut être extrêmement utile !

Et voilà, les amis ! Vous venez de terminer votre cours accéléré sur les tables HTML. Souvenez-vous, la pratique fait toujours la maîtresse. Essayez de créer des tables pour différents types de données - peut-être votre emploi du temps de classe, une liste de vos films préférés, ou même un arbre généalogique. Les possibilités sont infinies !

Bonne programmation, et puissent vos tables toujours être parfaitement alignées !

Credits: Image by storyset