Tag HTML <table>

❮ Précédent Suivant ❯

Le tag <table> sert de conteneur pour les éléments, qui définissent le contenu de la table HTML. Le nombre de lignes, de cellules et les titres de la table sont spécifiés à l’aide des tags <tr>, <td> et <th>.

Les lignes de la table sont spécifiées par le tag de bloc apparié <tr>. Chaque ligne dans la table est écrite dans un tag <tr> distincte.

Le tag <tr> stocke les cellules de tableau ajoutées à l'aide du tag <td>. Chaque cellule est écrite dans un tag <td> distincte. Les cellules enregistrent le contenu de la table (nombres, texte, etc.).

L'en-tête de la ligne ou de la colonne de la table est spécifié à l'aide du tag <th>. Le tag <th> est placé dans la première ligne du tableau. Dans le navigateur, il est automatiquement attribué en gras.

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

Pour créer des tables plus complexes, on utilise les tags <caption>, <col> <colgroup>, <a>, <thead> et <foot> incorporés dans le tag <table>.

Syntatxe

Le tag <table> est apparié; son contenu est écrit entre le tag ouvrant (<table>) et le tag fermant (</table>).

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      th, td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%; margin:30px auto; border-collapse:collapse;">
      <tr>
        <th>Mois</th>
        <th>Date</th>
      </tr>
      <tr>
        <td>Juin</td>
        <td>10.06.2018</td>
      </tr>
      <tr>
        <td>Juillet</td>
        <td>15.07.2018</td>
      </tr>
    </table>
  </body>
</html>

Essayez-vous-même!

Résultat

Attributs

Les attributs du tag <table> ne sont pas supportés en HTML5. Pour la stylization des tableaux, utilisez les styles CSS.

Attribut	Valeur	Description
align	left center right	Définit l'alignement du contenu de la colonne. Non supporté en HTML5.
background	background	Spécifie l'image d'arrière-plan dans la table. Non supporté en HTML5.
bgcolor	rgb(x,x,x) #xxxxxx colorname	Définit la couleur d'arrière-plan de la table. Non supporté en HTML5.
border	1 0	Spécifie l'épaisseur du cadre en pixels. Non supporté en HTML5.
cellpadding	pixels	Spécifie la distance entre la limite de cellule et son contenu. Non supporté en HTML5.
cellspacing	pixels	Spécifie la distance entre les cellules. Non supporté en HTML5.
cols	cols	Spécifie le nombre de colonnes dans la table. Non supporté en HTML5.
frame	void above below hsides lhs rhs vsides box border	Spécifie au navigateur comment afficher les bordures autour de la table. Non supporté en HTML5.
height	height	Spécifie la hauteur de la table.
rules	none groups rows cols all	Indique au navigateur où afficher les bordures entre les cellules. Non supporté en HTML5.
sortable	sortable	Indique que les données de la table peuvent être triées. Ceci est un attribut logique. Non supporté dans la specification de HTML 5.1.
summary	text	Donne une brève description de la table. Non supporté en HTML5.
width	pixels	Spécifie la largeur de la table. Non supporté en HTML5.

Le tag <table> supporte également les Attributs globaux et les Attributs d'événements.

Comment styler le tag HTML <table> ?

Propriétés communes pour modifier le poids visuel/emphase/taille du texte dans le tag <table>:

La propriété CSS font-style définit le style de la police: normal | italic | oblique | initial | inherit
La propriété CSS font-family spécifie une liste priorisée d’un ou plusieurs noms de famille de police et/ou noms de famille génériques pour l’élément sélectionné.
La propriété CSS font-size définit la taille de la police.
La propriété CSS font-weight définit si la police doit être en gras ou épaisse.
La propriété CSS text-transform contrôle le cas de texte et la capitalisation.
La propriété CSS text-decoration spécifie la décoration ajoutée au texte, et est une propriété raccourcie pour les propriétés CSS text-decoration-line, text-decoration-color, text-decoration-style.

Coloration du texte dans le tag HTML <table>:

La propriété CSS color décrit la couleur du contenu et les décorations du texte.
La propriété CSS background-color définit la couleur de fond d’un élément.

Styles de mise en page du texte pour la tag HTML <table>:

La propriété CSS text-indent spécifie l’indentation de la première ligne dans un bloc de texte.
La propriété CSS text-overflow spécifie comment le contenu qui n’est pas affiché doit être signalé à l’utilisateur.
La propriété CSS white-space spécifie comment l’espace blanc à l’intérieur d’un élément est géré.
La propriété CSS word-break spécifie où les lignes doivent être cassées.

Autres propriétés utiles pour le tag HTML <table>:

La propriété CSS text-shadow ajoute des ombres au texte.
La propriété CSS text-align-last définit l’alignement de la dernière ligne du texte.
La propriété CSS line-height spécifie la hauteur d’une ligne.
La propriété CSS letter-spacing définit les espaces entre les lettres/caractères d’un texte.
La propriété CSS word-spacing permet de définir l’espacement entre les mots.