HTMLTableColElement : propriété span

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é span de l'interface HTMLTableColElement représente le nombre de colonnes que ce <col> ou <colgroup> doit couvrir ; cela permet à la colonne d'occuper l'espace de plusieurs colonnes du tableau. Elle reflète l'attribut span.

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 à l'entier strictement positif le plus proche (jusqu'à 1000).

Exemples

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

HTML

html
<table>
  <colgroup>
    <col />
    <col span="2" class="multiColumn" />
  </colgroup>
  <thead>
    <tr>
      <th></th>
      <th scope="col">C1</th>
      <th scope="col">C2</th>
      <th scope="col">C3</th>
      <th scope="col">C4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Ligne 1</th>
      <td>cellule</td>
      <td>cellule</td>
      <td>cellule</td>
      <td>cellule</td>
    </tr>
  </tbody>
</table>
<button id="increase">Augmenter la portée de colonne</button>
<button id="decrease">Diminuer la portée de colonne</button>
<div>
  Le premier &lt;col&gt; couvre <output>2</output> colonne(s) réelle(s).
</div>

table {
  border-collapse: collapse;
}

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

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

CSS

css
.multiColumn {
  background-color: #d7d9f2;
}

JavaScript

js
// Récupère les éléments d'interface concernés
const col = document.querySelectorAll("col")[1];
const output = document.querySelectorAll("output")[0];

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

increaseButton.addEventListener("click", () => {
  col.span += 1;

  // Met à jour l'affichage
  output.textContent = col.span;
});

decreaseButton.addEventListener("click", () => {
  col.span -= 1;

  // Met à jour l'affichage
  output.textContent = col.span;
});