Comment faire des tableaux en HTML

Étapes pour créer des tableaux en HTML

Définissons le tableau <table>

Nous commençons par la balise <table> pour indiquer le début du tableau.

<table>
</table>

Définissons la balise d’entête <th>

La balise <th> est utilisée pour créer une cellule d’en-tête dans un tableau HTML. Ces cellules sont souvent utilisées pour fournir des titres pour les colonnes ou les lignes de données, ce qui permet d’améliorer la lisibilité et la compréhension du tableau. Par défaut, le texte dans les cellules <th> est en gras et centré pour le distinguer des autres cellules du tableau.

Voici comment tu peux utiliser la balise <th> :

<table>
  <tr>
    <th>En-tête 1</th>
    <th>En-tête 2</th>
  </tr>
  <tr>
    <td>Cellule 1</td>
    <td>Cellule 2</td>
  </tr>
</table>

Définissons les lignes de notre tableau

Nous utilisons la balise <tr> (table row) pour ajouter une nouvelle ligne au tableau.

<table>
  <tr>
  </tr>
</table>

Et enfin nos cellules

Nous utilisons la balise <td> (table data) pour ajouter des cellules à la ligne. Si vous voulez ajouter une cellule d’en-tête, utilisez la balise <th>.

<table>
  <tr>
    <td>Cellule 1</td>
    <td>Cellule 2</td>
  </tr>
</table>

Ajouter plus de lignes : Vous pouvez répéter les étapes 2 et 3 pour ajouter autant de lignes que vous le souhaitez.

<table>
  <tr>
    <td>Cellule 1</td>
    <td>Cellule 2</td>
  </tr>
  <tr>
    <td>Cellule 3</td>
    <td>Cellule 4</td>
  </tr>
</table>

Essayer de manipuler un peu et voyez le résultat :

A voir : Coder une Navbar en HTML et CSS: Guide pratique.

Comment styliser des tableaux en HTML

Il est possible d’ajouter du style à votre tableau HTML en utilisant des attributs dans vos balises. Voici quelques attributs que vous pouvez utiliser :

L’attribut border peut être utilisé pour définir la bordure du tableau. Vous pouvez spécifier la taille de la bordure en pixels.

<table border="1">
  <tr>
    <td>Cellule 1</td>
    <td>Cellule 2</td>
  </tr>
</table>

L’attribut cellspacing peut être utilisé pour définir l’espace entre les cellules.

<table border="1" cellspacing="10">
  <tr>
    <td>Cellule 1</td>
    <td>Cellule 2</td>
  </tr>
</table>

L’attribut cellpadding peut être utilisé pour définir la marge intérieure des cellules.

<table border="1" cellspacing="10" cellpadding="5">
  <tr>
    <td>Cellule 1</td>
    <td>Cellule 2</td>
  </tr>
</table>

Les attributs width et height peuvent être utilisés pour définir la largeur et la hauteur du tableau.

<table border="1" cellspacing="10" cellpadding="5" width="500" height="300">
  <tr>
    <td>Cellule 1</td>
    <td>Cellule 2</td>
  </tr>
</table>

Ces attributs vous permettent de styliser votre tableau HTML sans utiliser de CSS. Cependant, il est recommandé d’utiliser le CSS pour la stylisation, car cela offre plus de flexibilité et de contrôle sur l’apparence de votre tableau.

Entrainez-vous à faire des tableaux en HTML!

Et voilà, vous avez créé votre premier tableau en HTML ! N’oubliez pas de toujours fermer vos balises pour que votre code soit propre et facile à comprendre.