mozilla
Vos résultats de recherche

    <table>

    Résumé

    L'élément HTML <table> représente des données en deux dimensions ou plus.

    Note : Avant la création de CSS, l'élément HTML <table> fut souvent été utilisé comme une méthode de mise en page. Cet usage a été déconseillé depuis HTML 4, de fait l'élément <table> ne doit plus être utilisé à des fins de mise en page.

    Attributs

    Cet élément dispose des attributs globaux.

    align
    Cet attribut énumérée indique la manière dont la table doit être aligné en regard du document qui la contient. Ile peut prendre les valeurs suivantes :
    • left, signifiant que la table doit être affichée à la gauche du document ;
    • center, signifiant que la table doit être affichée centrée dans le document ;
    • right, signifiant que la table doit être affichée à droite du document.
       
    Note : 
    • Cet attribut ne doit pas être utilisé car il a été déprécié : l'élément <table> devrait être stylisé en utilisant CSS. Pour obtenir un effet similaire à celui réalisé par l'attribut align, les propriétés CSS text-align et vertical-align devraient être utilisées.
    • Avant Firefox 4, Firefox supportait également, en mode quirks uniquement, les valeurs middle, absmiddle, et abscenter comme synonymes de center
    bgcolor
    Cet attribut définit la couleur d'arrière-plan de toutes les cellules. C'est un code à 6 chiffres hexadécimaux comme défini par le sRGB. Il est précédé d'un '#'. Un de ces seize mot-clé peut également être utilisé.
      black = "#000000"   green = "#008000"
      silver = "#C0C0C0"   lime = "#00FF00"
      gray = "#808080"   olive = "#808000"
      white = "#FFFFFF"   yellow = "#FFFF00"
      maroon = "#800000"   navy = "#000080"
      red = "#FF0000"   blue = "#0000FF"
      purple = "#800080"   teal = "#008080"
      fuchsia = "#FF00FF"   aqua = "#00FFFF"
    Note d'utilisation : Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci a été déprécié. La mise en forme d'un tableau doit se faire en utilisant CSS. Il est possible d'utiliser la propriété CSS background-color pour cet effet.
    border
    Cet attribut entier définit, en pixels, la taille de la bordure entourant le tableau. S'il vaut 0, cela implique que l'attribut frame est vide.
    Note d'utilisation : Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Les propriétés CSS border, border-color, border-width et border-style devraient être utilisées à la place.
    cellpadding
    Cet attribut définit la taille de l'espace entre le contenu d'une cellule et sa bordure, qu'lle soit affichée ou non. Si cet attribut est exprimé en pixels, le décalage sera appliqué sur les quatre côtés. S'il est exprimé en pourcents, le contenu sera centré verticalement et la somme des espaces en haut et en bas représentera le pourcentage, il en va de même pour l'espace horizontal (droite et gauche).
    Note d'utilisation : Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Pour réaliser un effet similaire, la propriété border-collapse avec la valeur collapse doit être utilisée sur l'élément <table> et la propriété padding sur l'élément <td>.
    cellspacing
    Cet attribut définit la taille (en pourcents ou pixels) de l'espace (vertical et horizontal) entre deux cellules, entre la haut du tableau et les cellules de la première ligne, la gauche du tableau et les cellules de la première colonne, puis de la même manière pour le bas et le côté droit du tableau.
    Note d'utilisation : Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Pour réaliser un effet similaire, la propriété border-collapse avec la valeur collapse doit être utilisée sur l'élément <table> et la propriété margin sur l'élément <td>.
    frame
    Cet attribut à valeurs multiples définit les côtés du tableau sur lesquels dessiner une bordure. Il peut prendre les valeurs suivantes : above, hsides, lhs, border, void, below, vsides, rhs, box.
    Note d'utilisation : Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Pour réaliser un effet similaire, les propriétés border-style et border-width doivent être utilisées.
    rules
    Cet attribut à valeurs multiples définit la manière dont les traits doivent apparaître au sein du tableau. Il peut avoir les valeurs suivantes :
    • none, les traits ne doivent pas être affichés, c'est la valeur par défaut
    • groups, les traits sont uniquement affichés entre les groupes de lignes du tableau (définis par les éléments <thead>, <tbody> et <tfoot>)  et entre les groupes de colonnes (définis par les éléments <col> et <colgroup>)
    • rows, les traits seront affichées entre les lignes du tableau
    • columns, les lignes seront affichées entre les colonnes du tableau
    • all, tous les traits seront affichés (entre les lignes et entre les colonnes).
    Note :
    • L'apparence de ces traits dépend du navigateur utilisé et ne peut être modifiée.
    • Cet attribut ayant été déprécié, il ne doit pas être utilisé. La propriété CSS border doit être appliquée sur les éléments <thead>, <tbody>, <tfoot>, <col> ou <colgroup> adéquats.
    summary
    Cet attribut définit un texte alternatif à utiliser afin de décrire le tableau. Un tel texte peut être utilisé par un agent utilisateur qui ne pourrait pas afficher le tableau. Il est généralement utilisé pour les personnes souffrant d'une déficience visuelle, comme par exemple les aveugles qui navigueront sur des pages web en utilisant un écran Braille. Si l'information contenue dans cet attribut serait également utile aux autres utilisateurs, il faudra plutôt utiliser l'élément <caption>. L'attribut summary n'est pas obligatoire et peut être omis lorsqu'un élément <caption> remplit ce rôle.
    Note d'utilisation : Cet attribut ayant été déprécié, il ne doit pas être utilisé. Les façons suivantes peuvent être envisagées pour cette expression :
    • Grâce à un texte entourant le tableau, cette manière est la plus faible du point de vue de la sémantique
    • Grâce à l'élément <caption>
    • Dans un élément <details> inclus dans l'élément <caption> du tableau.
    • En insérant l'élément <table> dans un élément <figure> et en ajoutant la description textuelle à côté du tableau.
    • En insérant l'élément <table> dans un élément <figure> et en ajoutant la description textuelle dans un élément <figcaption>.
    • En modifiant le tableau afin qu'aucune description supplémentaire ne soit nécessaire : par exemple en utilisant des éléments <th> et <thead>.
    width
    Cet attribut définit la largeur du tableau. Elle peut être exprimée en pixels ou en pourcent (représentant alors la fraction du conteneur que le tableau peut occuper).
    Note d'utilisation : Cet attribut ayant été déprécié, il ne doit pas être utilisé. La propriété CSS width doit être utilisée à la place.

    Exemples

    Tableau simple

    <table>
      <tr>
        <td>John</td>
        <td>Doe</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>Doe</td>
      </tr>
    </table>

    John

    Doe
    Jane Doe
    <!-- Tableau simple avec en-tête -->
    <table>
      <tr>
        <th>Prénom</th>
        <th>Nom</th>
      </tr>
      <tr>
        <td>Jean</td>
        <td>Dupont</td>
      </tr>
      <tr>
        <td>Marion</td>
        <td>Duval</td>
      </tr>
    </table>
    
    <!-- Tableau utilisant thead, tfoot, et tbody -->
    <table>
      <thead>
        <tr>
          <th>Contenu d'en-tête 1</th>
          <th>Contenu d'en-tête 2</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td>Pied de tableau 1</td>
          <td>Pied de tableau 2</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>Contenu interne 1</td>
          <td>Contenu interne 2</td>
        </tr>
      </tbody>
    </table>
    
    <!-- Tableau utilisant colgroup -->
    <table>
      <colgroup span="4" class="columns"></colgroup>
      <tr>
        <th>Pays</th>
        <th>Capitales</th>
        <th>Population</th>
        <th>Langue</th>
      </tr>
      <tr>
        <td>USA</td>
        <td>Washington D.C.</td>
        <td>309 millions</td>
        <td>Anglais</td>
      </tr>
      <tr>
        <td>Suède</td>
        <td>Stockholm</td>
        <td>9 millions</td>
        <td>Suédois</td>
      </tr>
    </table>
    
    <!-- Tableau utilisant colgroup et col -->
    <table>
      <colgroup>
        <col class="column1">
        <col class="columns2plus3" span="2">
      </colgroup>
      <tr>
        <th>Citron vert</th>
        <th>Citron</th>
        <th>Orange</th>
      </tr>
      <tr>
        <td>Vert</td>
        <td>Jaune</td>
        <td>Orange</td>
      </tr>
    </table>
    
    <!-- Tableau simple avec une légende -->
    <table>
      <caption>Super légende</caption>
      <tr>
        <td>Données géniales</td>
      </tr>
    </table>
    

    Résultats

    Prénom Nom
    Jean Dupont
    Marion Duval

    Contenu d'en-tête 1 Contenu d'en-tête 2
    Pied de tableau 1 Pied de tableau 2
    Contenu interne 1 Contenu interne 2
    Pays Capitales Population Langue
    USA Washington D.C. 309 millions Anglais
    Suède Stockholm 9 millions Suédois
    Citron vert Citron Orange
    Vert Jaune Orange
    Super légende
    Données géniales

    Spécifications

    Spécification Statut Commentaires
    WHATWG HTML Living Standard
    La définition de '<table>' dans cette spécification.
    Living Standard  

    HTML 4.01 Specification
    La définition de '<table>' dans cette spécification.

    Recommendation  

    Compatibilité des navigateurs

    Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Support simple 1.0 1.0 (1.7 ou moins) 4.0 7.0 1.0
    Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Support simple 1.0 1.0 (1) 6.0 6.0 1.0

    Voir également

    Les propriétés CSS pertinentes pour la mise en forme d'un tableau HTML :

    Étiquettes et contributeurs liés au document

    Dernière mise à jour par : Erwann,