Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
HTMLTableColElement : propriété span
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é 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.
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
<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 <col> 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
.multiColumn {
background-color: #d7d9f2;
}
JavaScript
// 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;
});
Résultat
Spécifications
| Specification |
|---|
| HTML # dom-colgroup-span |
Compatibilité des navigateurs
Enable JavaScript to view this browser compatibility table.
Voir aussi
- La propriété
HTMLTableCellElement.colSpan