Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
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.
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
<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
| Spécification |
|---|
| HTML # dom-tdth-colspan |
Compatibilité des navigateurs
Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.
Voir aussi
- La propriété
HTMLTableCellElement.rowSpan - La propriété
HTMLTableColElement.span
Aider à améliorer MDN
Cette page a été modifiée le par les contributeur·ice·s du MDN.