HTMLTableCellElement : propriété colSpan

Baseline Widely available

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.

La propriété colSpan de l'interface HTMLTableCellElement représente le nombre de colonnes que cette cellule doit couvrir ; cela permet à la cellule d'occuper l'espace sur plusieurs colonnes du tableau. Elle reflète l'attribut colspan.

Valeur

Un nombre positif représentant le nombre de colonnes.

Note : Lors de la définition d'une nouvelle valeur, celle-ci est bornée à la valeur strictement positive la plus proche.

Exemples

Cet exemple propose deux boutons pour modifier la portée de colonnes de la première cellule du corps du tableau.

HTML

html

<table>
  <thead>
    <tr>
      <th>Colonne 1</th>
      <th>Colonne 2</th>
      <th>Colonne 3</th>
      <th>Colonne 4</th>
      <th>Colonne 5</th>
      <th>Colonne 6</th>
      <th>Colonne 7</th>
      <th>Colonne 8</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
  </tbody>
</table>
<button id="increase">Augmenter l'étendue</button>
<button id="decrease">Diminuer l'étendue</button>
<div>La première cellule s'étend sur <output>2</output> colonne(s).</div>

table {
  border-collapse: collapse;
}

th,
td,
table {
  border: 1px solid black;
}

button {
  margin: 1em 1em 1em 0;
}

JavaScript

// Récupère les éléments d'interface concernés
const cell = document.querySelectorAll("tbody tr td")[0];
const output = document.querySelectorAll("output")[0];

const increaseButton = document.getElementById("increase");
const decreaseButton = document.getElementById("decrease");

increaseButton.addEventListener("click", () => {
  cell.colSpan += 1;

  // Met à jour l'affichage
  output.textContent = cell.colSpan;
});

decreaseButton.addEventListener("click", () => {
  cell.colSpan -= 1;

  // Met à jour l'affichage
  output.textContent = cell.colSpan;
});

Résultat

Spécifications

Specification
HTML # dom-tdth-colspan

Compatibilité des navigateurs

Voir aussi

La propriété HTMLTableCellElement.rowSpan
La propriété HTMLTableColElement.span

Help improve MDN

Learn how to contribute

Cette page a été modifiée le 19 janv. 2026 par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content