HTML Tableau Colgroupe
L'élément <colgroup> est utilisé pour styliser des colonnes spécifiques d'un tableau.
HTML Tableau Colgroupe
Si vous souhaitez styliser les deux premières colonnes d'un tableau, utilisez le <colgroup> et le <col> éléments.
| MON | TUE | WED | THU | FRI | SAT | SUN |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
L'élément <colgroup> doit être utilisé comme conteneur pour les spécifications de colonne.
Chaque groupe est spécifié avec un élément <col>.
L'attribut span spécifie le nombre de colonnes qui obtiennent le style.
L'attribut style spécifie le style à donner aux colonnes.
Remarque : Il existe une sélection très limitée de propriétés CSS légales pour les colgroups.
Exemple
<table>
<colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Try it Yourself »
Note : La balise <colgroup> doit être un enfant d'un élément <table> et doit être placée avant tout autre élément. éléments de tableau, comme <thead>, <tr>, <td> etc., mais après l'élément <caption>, s'il est présent.
Propriétés CSS légales
Il n'existe qu'une sélection très limitée de propriétés CSS pouvant être utilisées dans le colgroup :
width propriété
visibility propriété
background propriétés
border propriétés
Toutes les autres propriétés CSS n'auront aucun effet sur vos tables.
Éléments de plusieurs colonnes
Si vous souhaitez styliser davantage de colonnes avec des styles différents, utilisez davantage d'éléments <col> à l'intérieur du <colgroup>:
Exemple
<table>
<colgroup>
<col span="2" style="background-color: #D6EEEE">
<col span="3" style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Try it Yourself »
Groupes de groupes vides
Si vous souhaitez styliser les colonnes au milieu d'un tableau, insérez un élément <col> "vide" (sans style) pour les colonnes avant :
Exemple
<table>
<colgroup>
<col span="3">
<col span="2" style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Try it Yourself »
Masquer les colonnes
Vous pouvez masquer les colonnes avec la propriété visibility: collapse :
Exemple
<table>
<colgroup>
<col span="2">
<col span="3" style="visibility: collapse">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Try it Yourself »
