Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

HTMLTableElement

Baseline
Large disponibilité
*

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'interface HTMLTableElement fournit des propriétés et méthodes particulières (en plus de l'interface objet HTMLElement dont elle hérite) pour manipuler la disposition et la présentation des tableaux dans un document HTML.

EventTarget Node Element HTMLElement HTMLTableElement

Propriétés d'instance

Hérite des propriétés de son parent, HTMLElement.

HTMLTableElement.caption

Un objet HTMLTableCaptionElement représentant le premier élément HTML <caption> enfant du tableau donné <table>, ou null si aucun élément de ce type n'existe. Cette propriété peut être assignée, ce qui entraîne la suppression du premier élément <caption> existant, le cas échéant, et l'insertion de la valeur donnée, si elle n'est pas null, en tant que premier enfant. Si la valeur assignée n'est pas un HTMLTableCaptionElement ou null, une TypeError est levée.

HTMLTableElement.tHead

Un objet HTMLTableSectionElement représentant le premier élément HTML <thead> enfant du tableau donné <table>, ou null si aucun élément de ce type n'existe. Cette propriété peut être assignée, ce qui entraîne la suppression du premier élément <thead> existant, le cas échéant, et l'insertion de la valeur donnée, si elle n'est pas null, immédiatement avant le premier élément qui HTML n'est ni un enfant <caption> ni un <colgroup>, ou en tant que dernier enfant s'il n'existe pas un tel élément. Si la valeur assignée n'est pas un HTMLTableSectionElement ou null, une TypeError est levée ; sinon, si ce n'est pas un élément HTML <thead> ou null, une HierarchyRequestError DOMException est levée.

HTMLTableElement.tFoot

Un objet HTMLTableSectionElement représentant le premier élément HTML <tfoot> enfant du tableau donné <table>, ou null si aucun élément de ce type n'existe. Cette propriété peut être assignée, ce qui entraîne la suppression du premier élément <tfoot> existant, le cas échéant, et l'insertion de la valeur donnée, si elle n'est pas null, en tant que dernier enfant. Si la valeur assignée n'est pas un HTMLTableSectionElement ou null, une TypeError est levée ; sinon, si ce n'est pas un élément HTML <tfoot> ou null, une HierarchyRequestError DOMException est levée.

HTMLTableElement.rows Lecture seule

Retourne un HTMLCollection dynamique de tous les éléments HTML <tr> qui sont des enfants de l'élément HTML <table> donné, ou des enfants de l'un des enfants <thead>, <tbody> et <tfoot> du tableau. Les membres du <thead> apparaissent en premier, suivis des membres du <tbody> et du tableau lui-même, et les membres du <tfoot> viennent en dernier, triés par ordre dans l'arbre au sein de chaque groupe. L'objet retourné est automatiquement mis à jour lorsque le HTMLTableElement change.

HTMLTableElement.tBodies Lecture seule

Retourne un HTMLCollection dynamique de tous les éléments enfants <tbody> du tableau donné <table>. L'objet retourné est automatiquement mis à jour lorsque le HTMLTableElement change.

Propriétés obsolètes

Attention : Les propriétés suivantes sont obsolètes. Vous devez éviter de les utiliser.

HTMLTableElement.align

Une chaîne de caractères contenant une valeur énumérée reflétant l'attribut align. Elle indique l'alignement du contenu de l'élément par rapport au contexte environnant. Les valeurs possibles sont "left", "right" et "center".

HTMLTableElement.bgColor

Une chaîne de caractères contenant la couleur de fond des cellules. Elle reflète l'attribut obsolète bgColor.

HTMLTableElement.border

Une chaîne de caractères contenant la largeur en pixels de la bordure du tableau. Elle reflète l'attribut obsolète border.

HTMLTableElement.cellPadding

Une chaîne de caractères contenant la largeur en pixels de l'espace horizontal et vertical entre le contenu de la cellule et les bordures de la cellule. Elle reflète l'attribut obsolète cellpadding.

HTMLTableElement.cellSpacing

Une chaîne de caractères contenant la largeur en pixels de la séparation horizontale et verticale entre les cellules. Elle reflète l'attribut obsolète cellspacing.

HTMLTableElement.frame

Une chaîne de caractères contenant le type de bordures externes du tableau. Elle reflète l'attribut obsolète frame et peut prendre l'une des valeurs suivantes : "void", "above", "below", "hsides", "vsides", "lhs", "rhs", "box" ou "border".

HTMLTableElement.rules

Une chaîne de caractères contenant le type de bordures internes du tableau. Elle reflète l'attribut obsolète rules et peut prendre l'une des valeurs suivantes : "none", "groups", "rows", "cols" ou "all".

HTMLTableElement.summary

Une chaîne de caractères contenant une description de l'objectif ou de la structure du tableau. Elle reflète l'attribut obsolète summary.

HTMLTableElement.width

Une chaîne de caractères contenant la longueur en pixels ou en pourcentage de la largeur souhaitée de l'ensemble du tableau. Elle reflète l'attribut obsolète width.

Méthodes d'instance

Hérite des méthodes de son parent, HTMLElement.

HTMLTableElement.createTHead()

Crée un élément HTML <thead>, l'insère avant le premier enfant élément du <table> donné qui n'est ni un <caption> ni un <colgroup>, ou comme dernier enfant si aucun emplacement d'insertion de ce type n'est trouvé, et le retourne. Si le tableau a déjà un enfant <thead>, cette méthode retourne le premier enfant de ce type sans en créer un nouveau.

HTMLTableElement.deleteTHead()

Supprime le premier enfant élément HTML <thead> d'un <table> donné, le cas échéant.

HTMLTableElement.createTFoot()

Crée un élément HTML <tfoot>, l'insère comme dernier enfant du <table> donné, et le retourne. Si le tableau a déjà un enfant <tfoot>, cette méthode retourne le premier enfant de ce type sans en créer un nouveau.

HTMLTableElement.deleteTFoot()

Supprime le premier enfant élément HTML <tfoot> d'un <table> donné, le cas échéant.

HTMLTableElement.createTBody()

Crée un élément HTML <tbody>, l'insère immédiatement après le dernier enfant élément <tbody> du <table> donné, ou comme dernier enfant s'il n'y a pas un tel élément, et le retourne.

HTMLTableElement.createCaption()

Crée un élément HTML <caption>, l'insère comme premier enfant du <table> donné, et le retourne. Si le tableau a déjà un enfant <caption>, cette méthode retourne le premier enfant de ce type sans en créer un nouveau.

HTMLTableElement.deleteCaption()

Supprime le premier enfant élément HTML <caption> d'un <table> donné, le cas échéant.

HTMLTableElement.insertRow()

Crée un élément HTML <tr>, l'insère à la position définie dans la collection rows, et le retourne. Si la collection rows est vide et que le tableau n'a également aucun élément HTML <tbody>, un élément <tbody> est d'abord créé et inséré.

HTMLTableElement.deleteRow()

Supprime une ligne spécifique (<tr>) d'un <table> donné. Si index est -1, la dernière ligne est supprimée.

Exemples

Utilisation de l'interface DOM Table

L'interface HTMLTableElement fournit des méthodes pratiques pour créer et manipuler des tableaux. Deux méthodes fréquemment utilisées sont HTMLTableElement.insertRow et HTMLTableRowElement.insertCell.

Pour ajouter une ligne et des cellules à un tableau existant :

html
<table id="table0">
  <tbody>
    <tr>
      <td>Ligne 0 Cellule 0</td>
      <td>Ligne 0 Cellule 1</td>
    </tr>
  </tbody>
</table>
js
const table = document.getElementById("table0");
const row = table.insertRow(-1);

for (let i = 0; i < 2; i++) {
  const cell = row.insertCell(-1);
  const text = `Row ${row.rowIndex} Cell ${i}`;
  cell.appendChild(document.createTextNode(text));
}

Spécifications

Spécification
HTML
# htmltableelement

Compatibilité des navigateurs

Voir aussi

  • L'élément HTML qui implémente cette interface : <table>