Pour créer des tables en HTML on utilise l’élément <table>. Il serve de conteneur pour les éléments, qui définissent le contenu de la table.

Des lignes dans le tableau sont définies par le tag de bloc <tr> (abrégé de l’anglais “table row” – lignes de la table). Chaque ligne du tableau est écrite dans un tag <tr> distincte.

Le tag <tr> stocke les cellules du tableau ajoutées à l’aide du tag <td> (abrégée de l’anglais. “table data” – données de tableau). Chaque cellule est écrite dans un tag <td> distincte. Les cellules enregistrent le contenu de la table (nombres, texte etc.).

Le titre d'une ligne ou d'une colonne du tableau est spécifié à l'aide du tag <th> (en abrégé "tête de table"). Le tag <th> est placé dans la première ligne du tableau. Dans le navigateur, il est automatiquement attribué en gras.

Syntaxe

La balise <table> vient par paires. Le contenu doit être écrit entre la balise d'ouverture <table> et celle de fermeture </table>.

Le tag <th> n’est pas un élément obligatoire de la table, mais nous vous recommandons de l’inclure dans la table, car elle aide à mieux structurer le contenu et aide également les moteurs de recherche à mieux indexer les tables.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Mois</th>
        <th>Data</th>
      </tr>
      <tr>
        <td>Janvier</td>
        <td>10.01.2014</td>
      </tr>
      <tr>
        <td>Février</td>
        <td>10.01.2014</td>
      </tr>
    </table>
  </body>
</html>

Résultat

Mois Data
Janvier 10.01.2014
Février 10.01.2014

Les bordures des tableaux

Comme vous pouvez le voir dans l’exemple, le navigateur par défaut n’affiche pas les cadres du tableau. On peut les ajouter en deux manières, en utilisant l’attribut border, ou à l’aide des styles CSS. Considérons les deux options en détail.

L’attribut border installe le cadre autour du tableau et les bordures entre les cellules. Si la valeur de l’attribut n’est pas affichée, le navigateur affiche alors un cadre d'une épaisseur d'un pixel. Par défaut, le cadre est affiché en double.

Cela ressemble comme ça :

<table border="1">
<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>Mois</th>
        <th>Data</th>
      </tr>
      <tr>
        <td>Janvier</td>
        <td>10.01.2014</td>
      </tr>
      <tr>
        <td>Février</td>
        <td>10.01.2014</td>
      </tr>
    </table>
  </body>
</html>

Résultat

Mois Data
Janvier 10.01.2014
Février 10.01.2014

On peut installer les bordures du tableau aussi à l’aide de la propriété CSS border, qui définit l’épaisseur et le style du cadre.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      table,th,td{border:1px solid #cccccc}
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>Mois</th>
        <th>Data</th>
      </tr>
      <tr>
        <td>Janvier</td>
        <td>10.01.2014</td>
      </tr>
      <tr>
        <td>Février</td>
        <td>10.01.2014</td>
      </tr>
    </table>
  </body>
</html>

Résultat

Mois Data
Janvier 10.01.2014
Février 10.01.2014

Regroupement des éléments de la table

On peut regrouper le contenu du tableau dans les blocs logiques. Pour ce faire, HTML fournit les tags suivants:

  • Le tag <thead> - (abrégé de l’anglais “table head” - "tête" du tableau) regroupe une ou plusieurs des premières lignes de la table, c'est-à-dire créer un "chapeau" de la table.
  • Le tag <body> - (abrégé de l’anglais “table body” - "corps" du tableau) regroupe les lignes centrales du tableau avec le contenu principal. (On peut utiliser plusieurs de ces blocs dans un tableau).
  • Le tag <tfoot> - (abrégé de l’anglais “table footer” - pied de table) regroupe la ligne du bas, formant le "sous-sol" de la table. (Un seul tag <tfoot> peut être utilisé dans une table).
Dans le code, le tag <tfoot> est placé avant le tag <tbody>. Ceci est fait parce que le navigateur doit afficher le bas de la table avant d'obtenir toutes les données (potentiellement nombreuses) pouvant être contenues dans le tag <tbody>.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      table,th,td{border:1px solid #cccccc}
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Mois</th>
          <th>Data</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td>Montant total</td>
          <td>200$</td>
        </tr>
      </tfoot>
    </table>
    <tbody>
      <tr>
        <td>Juin</td>
        <td>150$</td>
      </tr>
      <tr>
        <td>Juillet</td>
        <td>50$</td>
      </tr>
    </tbody>
  </body>
</html>

Résultat

Tableau

La combinaison des cellules

Pour combiner des cellules dans une table, les attributs colspan et rowspan sont utilisés. L'attribut colspan spécifie le nombre de cellules à combiner horizontalement et l'attribut rowspan à la verticale.

Exemple de combinaison des cellules horizontalement

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      table,th,td{border:1px solid #cccccc}
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th colspan="2">Mois et Data</th>
      </tr>
      <tr>
        <td>Janvier</td>
        <td>10.01.2014</td>
      </tr>
      <tr>
        <td>Février</td>
        <td>10.01.2014</td>
      </tr>
    </table>
  </body>
</html>

Résultat

Mois et Data
Janvier 10.01.2014
Février 10.01.2014

Exemple de combinaison de cellules verticalement

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      table,th,td{border:1px solid #cccccc}
    </style>
  </head>
  <body>
    <table >
      <tr>
        <th>Mois</th>
        <th>Data</th>
      </tr>
      <tr>
        <td>Janvier</td>
        <td rowspan="2">10.01.2014</td>
      </tr>
      <tr>
        <td>Février</td>
      </tr>
    </table>
  </body>
</html>

Résultat

Mois Data
Janvier 10.01.2014
Février

Pratiquez vos connaissances

Quelles sont les balises couramment utilisées pour créer des tableaux HTML?
Trouvez-vous cela utile?