Get to know MDN better
Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
L'élément HTML <table> représente des données tabulaires, c'est-à-dire des informations présentées dans un tableau à deux dimensions composé de lignes et de colonnes de cellules contenant des données.
Cet élément inclut les attributs universels.
Les attributs suivants sont obsolètes et ne doivent pas être utilisés. Ils sont documentés ci-dessous à titre de référence pour la mise à jour de code existant et pour l'intérêt historique uniquement.
alignDéfinit l'alignement horizontal du tableau à l'intérieur de son élément parent. Les valeurs énumérées possibles sont left, center et right. Utilisez plutôt les propriétés CSS margin-inline-start et margin-inline-end, car cet attribut est obsolète.
bgcolorDéfinit la couleur d'arrière-plan du tableau. La valeur est une couleur HTML ; soit un code hexadécimal RGB à 6 chiffres, précédé d'un #, ou un mot-clé de couleur. Les autres valeurs CSS <color> ne sont pas prises en charge. Utilisez la propriété CSS background-color à la place, car cet attribut est obsolète.
borderDéfinit, en tant que valeur entière non négative (en pixels), la taille de la bordure entourant le tableau. Si la valeur est 0, l'attribut frame est défini sur void. Utilisez plutôt la propriété CSS border, car cet attribut est obsolète.
cellpaddingDéfinit l'espace entre le contenu d'une cellule et sa bordure. Cet attribut est obsolète : au lieu de l'utiliser, appliquez la propriété CSS padding aux éléments <th> et <td>.
cellspacingDéfinit la taille de l'espace entre deux cellules. Cet attribut est obsolète : au lieu de l'utiliser, définissez la propriété CSS border-spacing sur l'élément <table>. Notez que cela n'a aucun effet si la propriété CSS border-collapse de l'élément <table> est définie sur collapse.
frameDéfinit quels côtés de la bordure entourant le tableau doivent être affichés. Les valeurs énumérées possibles sont void, above, below, hsides, vsides, lhs, rhs, box et border. Utilisez plutôt les propriétés CSS border-style et border-width, car cet attribut est obsolète.
rulesDéfinit où les traits (bordures) sont affichés dans le tableau. Les valeurs énumérées possibles sont none (valeur par défaut), groups (éléments <thead>, <tbody> et <tfoot>), rows (lignes horizontales), cols (lignes verticales) et all (bordure autour de chaque cellule). Utilisez plutôt la propriété CSS border sur les éléments liés au tableau appropriés ainsi que sur l'élément <table>, car cet attribut est obsolète.
summaryDéfinit un texte alternatif qui résume le contenu du tableau. Utilisez plutôt l'élément <caption>, car cet attribut est obsolète.
widthCet 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 : Cet attribut ayant été déprécié, il ne doit pas être utilisé. La propriété CSS width doit être utilisée à la place.
Les éléments suivants font partie de la structure d'un tableau :
Le bloc <table> établit un contexte de mise en forme de tableau. Les éléments à l'intérieur de <table> génèrent des boîtes rectangulaires. Chaque boîte occupe un certain nombre de cellules selon les règles suivantes :
Les cellules de tableau ont un remplissage. Les boîtes qui composent un tableau n'ont pas de marges.
Pour la mise en forme, on peut considérer que les éléments du tableau sont placés sur six couches superposées :
L'arrière-plan défini sur un élément d'une couche ne sera visible que si les couches au-dessus ont un arrière-plan transparent. Une cellule manquante est rendue comme si une boîte de cellule de tableau anonyme occupait cet emplacement.
Fournir un élément <caption> pour légender le tableau avec une description claire et concise permet aux utilisateur·ice·s de décider s'ils doivent lire le contenu du tableau ou le passer.
Une telle légende fournit une aide pour les personnes qui naviguent avec des outils d'assistance comme des lecteurs d'écran.
L'attribut scope sur les cellules d'en-tête (éléments <th>) est redondant dans les contextes simples, car la portée est déduite. Cependant, certaines technologies d'assistance peuvent ne pas en déduire correctement la portée, donc définir explicitement la portée de l'en-tête peut améliorer l'expérience utilisateur. Dans les tableaux complexes, scope peut être défini pour fournir les informations nécessaires sur les cellules associées à un en-tête.
Les technologies d'assistance telles que les lecteurs d'écran peuvent avoir des difficultés à analyser les tableaux si complexes que les cellules d'en-tête ne peuvent pas être associées de manière strictement horizontale ou verticale. Cela est généralement indiqué par la présence des attributs colspan et rowspan.
Idéalement, envisagez d'autres façons de présenter le contenu du tableau, notamment en le divisant en une collection de tableaux plus petits et liés qui n'ont pas besoin d'utiliser les attributs colspan et rowspan. En plus d'aider les personnes utilisant des technologies d'assistance à comprendre le contenu du tableau, cela peut aussi bénéficier aux personnes ayant des troubles cognitifs qui pourraient avoir du mal à comprendre les associations décrites par la présentation du tableau.
Si le tableau ne peut pas être divisé, utilisez une combinaison des attributs id et headers pour associer informatiquement chaque cellule du tableau aux cellules d'en-tête (éléments <th>) auxquelles elle est associée.
Les exemples ci-dessous incluent des tableaux d'une complexité croissante. Consultez aussi notre guide pour débutant·e·s sur la mise en forme des tableaux pour des informations sur la mise en forme des tableaux, incluant des techniques courantes et utiles.
La structure d'un tableau (<table>) implique l'utilisation de plusieurs éléments HTML liés aux tableaux ainsi que divers attributs associés. Les exemples suivants visent à fournir une explication simplifiée qui couvre les bases et les standards courants. Des informations supplémentaires et plus détaillées sont disponibles sur les pages liées correspondantes.
Ces exemples de tableaux montrent comment créer un tableau accessible structuré avec HTML et mis en forme avec CSS.
En raison de la structure des tableaux HTML, le marquage peut rapidement devenir volumineux. Pour cette raison, il est important de définir clairement l'objectif et l'apparence finale du tableau afin de créer la structure appropriée. Une structure logique développée avec un marquage sémantique est non seulement plus facile à mettre en forme, mais permet de créer des tableaux utiles et accessibles qui peuvent être compris et parcourus par tout le monde, y compris les moteurs de recherche et les utilisateur·ice·s de technologies d'assistance.
Le premier exemple est basique, les exemples suivants gagnent en complexité. Nous allons d'abord développer une structure de tableau HTML très simple. Les deux premiers exemples ne contiennent aucun groupe de sections de tableau comme une tête, un corps ou un pied défini, et n'impliquent aucun étalement de cellule ni relation de cellule explicitement définie. Même une légende n'est pas fournie. Au fil des exemples, ils seront progressivement enrichis pour inclure toutes les fonctionnalités qu'un tableau de données complexe doit posséder.
Cet exemple présente un tableau très basique avec trois lignes et deux colonnes. Pour montrer les styles de tableau par défaut du navigateur, aucun CSS n'est inclus dans cet exemple.
Les lignes du tableau sont définies avec des éléments <tr>, et les colonnes sont définies avec des cellules d'en-tête et de données à l'intérieur. La première ligne contient les cellules d'en-tête (éléments <th>) qui servent d'en-têtes de colonne pour les cellules de données (éléments <td>). Chaque élément (<th> ou <td>) par ligne est dans sa colonne respective — c'est-à-dire que le premier élément d'une ligne est dans la première colonne, et le second élément de cette ligne est dans la seconde colonne.
Il n'y a aucune mise en forme CSS personnalisée ni aucune feuille de style utilisateur·ice appliquée à ce tableau. La mise en forme provient uniquement de la feuille de style de l'agent utilisateur.
Cet exemple étend le tableau simple, en ajoutant du contenu et des styles CSS de base.
Le tableau comporte désormais quatre lignes (éléments <tr>), chacune avec quatre colonnes. La première ligne est une ligne de cellules d'en-tête (elle ne contient que des éléments <th>). Les lignes suivantes incluent une colonne d'en-tête (éléments <th> comme premier enfant de chaque ligne) et trois colonnes de données (éléments <td>). Comme les éléments de section de tableau ne sont pas utilisés, le navigateur définit automatiquement la structure du groupe de contenu, c'est-à-dire que toutes les lignes sont englobées dans le corps du tableau d'un élément <tbody> implicite.
Avec CSS, nous appliquons une mise en forme de base pour créer des lignes autour des composants du tableau afin de rendre la structure des données plus claire. Le CSS ajoute une bordure pleine autour du <table> et autour de chaque cellule du tableau, y compris celles définies avec les éléments <th> et <td>, délimitant chaque cellule d'en-tête et de données.
Avant d'étendre le tableau de manière plus avancée, il est conseillé d'améliorer l'accessibilité en définissant les relations entre les cellules d'en-tête et de données (éléments <th> et <td>).
Ceci s'accomplit en ajoutant l'attribut scope sur les éléments <th> et en définissant les valeurs correspondantes col (colonne) ou row (ligne).
Le CSS et le rendu visuel restent inchangés — cette adaptation fournit des informations contextuelles précieuses pour les technologies d'assistance comme les lecteurs d'écran afin d'aider à identifier à quelles cellules les en-têtes sont liés.
Note : Si la structure du tableau est encore plus complexe, l'utilisation (supplémentaire) de l'attribut headers sur les éléments <th> et <td> peut améliorer l'accessibilité et aider les technologies d'assistance à identifier les relations entre les cellules ; voir Tableaux complexes.
En plus d'améliorer l'accessibilité en définissant les relations entre les cellules, la sémantique du tableau peut être améliorée en introduisant des groupes de sections de tableau.
Comme la première ligne (élément <tr>) ne contient que des cellules d'en-tête de colonne et fournit l'en-tête pour le reste du contenu du tableau, elle peut être placée dans l'élément <thead> pour indiquer explicitement que cette ligne constitue la section d'en-tête du tableau. De plus, ce que le navigateur accomplit automatiquement peut aussi être défini explicitement — la section corps du tableau, qui contient les données principales du tableau, est définie en englobant les lignes correspondantes dans l'élément <tbody>. L'utilisation explicite de l'élément <tbody> aide le navigateur à créer la structure de tableau souhaitée, évitant ainsi des résultats inattendus.
Encore une fois, le CSS et le rendu visuel restent inchangés — le fait de définir de tels groupes de sections de tableau fournit des informations contextuelles précieuses pour les technologies d'assistance, y compris les lecteurs d'écran et les moteurs de recherche, ainsi que pour la mise en forme en CSS, qui sera illustrée dans un exemple ultérieur.
Dans cet exemple, nous étendons encore le tableau en ajoutant une colonne et en introduisant une section d'en-tête sur plusieurs lignes.
En partant du tableau créé jusqu'ici, une nouvelle colonne pour une « date de fin d'adhésion » est ajoutée dans chaque ligne du corps avec l'élément <td>. Une ligne supplémentaire (élément <tr>) est également ajoutée dans la section d'en-tête (élément <thead>) pour introduire un en-tête « Périodes d'adhésion » servant de titre pour les colonnes « Adhésion » et « Annulation ».
La création de la seconde ligne d'en-tête implique l'ajout des attributs colspan et rowspan sur les éléments <th> afin d'attribuer les cellules d'en-tête aux bonnes colonnes et lignes.
La section d'en-tête comporte désormais deux lignes, l'une avec les en-têtes (éléments <th>) « Nom », « ID », « Périodes d'adhésion » et « Solde », et un en-tête « Périodes d'adhésion » avec deux sous-en-têtes dans une seconde ligne : « Adhésion » et « Annulation ». Cela est réalisé par :
Il est courant et recommandé de fournir un résumé du contenu du tableau, permettant aux utilisateur·ice·s de déterminer rapidement la pertinence du tableau. De plus, la colonne « Solde » est résumée en affichant la somme des soldes des membres individuels.
Un résumé de tableau est ajouté en utilisant une légende (élément <caption>) comme premier enfant de l'élément <table>. La légende fournit le nom accessible ou la description accessible du tableau.
Enfin, une section de pied de tableau (élément <tfoot>) est ajoutée sous le corps, avec une ligne qui résume la colonne « Solde » en affichant une somme. Les éléments et attributs introduits précédemment sont appliqués.
Appliquons une mise en forme de base au tableau pour ajuster la police et ajouter un background-color aux lignes d'en-tête et de pied. Le HTML reste inchangé cette fois, passons donc directement au CSS.
Ici, une propriété CSS font est ajoutée à l'élément <table> pour définir une police plus agréable visuellement (ou une abominable police sans empattement, selon votre opinion). L'aspect intéressant est la seconde règle, où les éléments <tr> situés dans <thead> et <tfoot> sont mis en forme avec un background-color bleu clair. Cela permet d'appliquer rapidement une couleur de fond à toutes les cellules de sections spécifiques simultanément.
Nous allons maintenant aller plus loin, avec des styles appliqués aux lignes de l'en-tête et du corps, incluant des couleurs de lignes alternées, des cellules avec des couleurs différentes selon leur position dans la ligne, etc. Regardons d'abord le résultat.
Voici a quoi ressemblera le tableau final :
Il n'y a encore aucun changement dans le HTML. Voyez ce qu'une bonne préparation de la structure HTML permet d'obtenir !
Le CSS est cette fois beaucoup plus fourni. Il n'est pas compliqué, mais il y a beaucoup d'éléments à prendre en compte. Détaillons-les.
Ici, les propriétés CSS border-collapse et border-spacing sont ajoutées pour éliminer l'espacement entre les cellules et fusionner les bordures qui se touchent afin qu'elles ne forment qu'une seule bordure au lieu de se retrouver avec des bordures doubles. De plus, l'élément <caption> est placé en bas du tableau grâce à la propriété caption-side :
Ensuite, la propriété CSS padding est utilisée pour donner à toutes les cellules du tableau de l'espace autour de leur contenu. La propriété CSS vertical-align aligne le contenu des cellules d'en-tête en bas de la cellule, ce qui est visible sur les cellules de l'en-tête qui s'étendent sur deux lignes :
La règle CSS suivante définit le background-color de tous les éléments <tr> dans l'en-tête du tableau (défini avec <thead>). Ensuite, la bordure inférieure de l'en-tête est définie comme une ligne de deux pixels de large. Remarquez cependant que nous utilisons le sélecteur CSS :nth-of-type pour appliquer la propriété CSS border-bottom à la deuxième ligne de l'en-tête. Pourquoi ? Parce que l'en-tête est composé de deux lignes dont certaines cellules sont fusionnées. Il y a donc réellement deux lignes ; appliquer le style à la première ligne ne donnerait pas le résultat attendu :
Stylisons les deux cellules d'en-tête « Adhéré » et « Annulé » avec des teintes vertes et rouges pour représenter le « positif » d'un nouveau membre et le « négatif » d'une adhésion annulée. Ici, nous ciblons la dernière ligne de la section d'en-tête du tableau à l'aide du sélecteur CSS :last-of-type et appliquons une couleur verdâtre à la première cellule d'en-tête (« Adhéré ») et une teinte rougeâtre à la seconde (« Annulé ») :
Comme la première colonne doit également ressortir, une mise en forme personnalisée est ajoutée ici aussi. Cette règle CSS applique la propriété CSS text-align à la première cellule d'en-tête de chaque ligne du corps du tableau pour aligner à gauche les noms des membres, ainsi qu'une background-color différente :
Il est courant d'améliorer la lisibilité des données d'un tableau en alternant les couleurs des lignes — on parle parfois de « zébrage ». Ajoutons un peu de background-color à chaque ligne paire :
Comme il est d'usage d'aligner à droite les valeurs monétaires dans les tableaux, faisons-le ici. Cela définit simplement la propriété CSS text-align pour la dernière cellule <td> de chaque ligne du corps sur right :
Enfin, une mise en forme similaire à celle de l'en-tête est appliquée à la section de pied du tableau pour la faire ressortir également :
Un problème courant avec les tableaux sur le web est qu'ils ne fonctionnent pas naturellement très bien sur les petits écrans lorsque la quantité de contenu est importante, et la manière de les rendre défilants n'est pas évidente, surtout lorsque le balisage provient d'un CMS et ne peut pas être modifié pour ajouter un conteneur.
Cet exemple propose une façon d'afficher des tableaux dans de petits espaces. Le contenu HTML a été masqué car il est très volumineux et il n'y a rien de particulier à signaler. Le CSS est plus intéressant à examiner dans cet exemple.
En regardant ces styles, vous remarquerez que la propriété CSS display du tableau a été définie sur block. Cela permet le défilement, mais le tableau perd une partie de son intégrité et les cellules tentent de devenir aussi petites que possible. Pour atténuer ce problème, nous avons appliqué white-space à nowrap sur le <tbody>. Cependant, nous ne le faisons pas pour le <thead> afin d'éviter que des titres longs n'obligent les colonnes à être plus larges que nécessaire pour afficher les données.
Pour garder les en-têtes du tableau visibles lors du défilement, nous avons appliqué position à sticky sur les éléments <th>. Notez que nous n'avons pas défini border-collapse à collapse, car sinon l'en-tête ne pourrait pas être séparé correctement du reste du tableau.
Étant donné que le <table> a une taille fixe, le paramètre overflow à auto est la partie importante ici, car il rend le tableau défilant.
| Contenu de flux |
|
Dans cet ordre : |
| Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires. |
| Tout élément qui accepte du contenu de flux. |
| table |
| Tous les rôles sont autorisés. |
| HTMLTableElement |
| HTML # the-table-element |
Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.
Cette page a été modifiée le 25 avr. 2026 par les contributeur·ice·s du MDN.
Votre modèle pour un internet meilleur.
Visitez la société mère à but non lucratif de Mozilla Corporation, la Fondation Mozilla.
Certaines parties de ce contenu sont protégées par le droit d'auteur ©1998—2026 des contributeurs individuels de mozilla.org. Contenu disponible sous une licence Creative Commons.