HTMLTableCellElement : propriété colSpan

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.

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.

Dans cet article

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

js
// 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;
});