Balise HTML `<table>`

La balise <table> définit un tableau HTML. Elle contient d'autres éléments HTML qui déterminent la structure du tableau.

La <tr> balise définit les lignes du tableau. Une ligne peut contenir un ou plusieurs éléments <td> ou <th>, qui définissent respectivement une cellule de tableau et un en-tête de tableau.

La balise <th> est placée dans la première ligne du tableau. Le texte qu'elle contient est en gras et centré par défaut.

TIP

La balise <th> n'est pas un élément obligatoire dans un tableau, mais nous recommandons de l'utiliser, car elle permet d'obtenir une meilleure mise en page du tableau et aide également les moteurs de recherche à mieux indexer le contenu du tableau.

Un tableau plus complexe peut également inclure des éléments <caption>, <thead>, <tbody>, <tfoot> ou <colgroup>.

DANGER

Il est recommandé de ne pas utiliser de tableaux pour la mise en page des pages. Parfois, les tableaux sont mal utilisés en HTML pour contrôler la mise en page d'une page. À cet effet, vous pouvez utiliser CSS comme alternative aux tableaux HTML.

Syntaxe

La balise <table> s'utilise par paire. Le contenu est écrit entre les balises d'ouverture (<table>) et de fermeture (</table>).

Exemple de la balise HTML `<table>` :

Balise HTML <table>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 80%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>Month</th>
        <th>Date</th>
      </tr>
      <tr>
        <td>June</td>
        <td>10.06.2018</td>
      </tr>
      <tr>
        <td>July</td>
        <td>15.07.2018</td>
      </tr>
    </table>
  </body>
</html>

Try it Yourself »

Résultat

table example

Attributs

DANGER

Les attributs de la balise <table> ne sont pas pris en charge en HTML5. Pour styliser les tableaux, utilisez les propriétés CSS listées ci-dessous.

Attribute	Value	Description	CSS property
align	left center right	Définit l'alignement du tableau par rapport au texte environnant. Non pris en charge en HTML5.	margin
bgcolor	rgb(x,x,x) #xxxxxx colorname	Définit la couleur d'arrière-plan du tableau. Non pris en charge en HTML5.	background-color
border	1 0	Définit la taille du cadre entourant le tableau. Non pris en charge en HTML5.	border
cellpadding	pixels	Définit l'espace entre la bordure de la cellule et son contenu. Non pris en charge en HTML5.	padding
cellspacing	pixels	Définit l'espace entre les cellules. Non pris en charge en HTML5.	border-spacing
frame	void above below hsides lhs rhs vsides box border	Définit quels côtés du cadre entourant le tableau doivent être affichés. Non pris en charge en HTML5.	border-style border-width
rules	none groups rows cols all	Définit quelles parties des bordures internes doivent être visibles. Non pris en charge en HTML5.	border (Utilisez cette propriété en correspondance avec les balises HTML thead, tbody, tfoot, col ou colgroup).
width	pixels	Définit la largeur du tableau. Non pris en charge en HTML5.	width

La balise <table> prend également en charge les Attributs globaux et les Attributs d'événement.

Pratique

Quelles sont les utilisations des balises <table>, <tr>, <td> et <th> en HTML ?

La balise <table> est utilisée pour créer un tableau.La balise <tr> est utilisée pour créer une ligne dans le tableau.La balise <td> est utilisée pour créer une cellule dans le tableau.La balise <th> est utilisée pour créer une cellule d'en-tête dans le tableau.La balise <th> est utilisée pour créer une note de bas de page dans le tableau.La balise <td> est utilisée pour insérer des images dans le tableau.

Balise HTML <table> ​

Syntaxe ​

Exemple de la balise HTML <table> : ​

Résultat ​