Tag HTML <table>

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>

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>:

Coloration du texte dans le tag HTML <table>:

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

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


Support de Navigateurs



Trouvez-vous cela utile?

Articles Associées