HTML Colgroup de Table
L'élément <colgroup> est utilisé pour styliser des colonnes spécifiques d'une table.
Colgroup de Table HTML
Si vous souhaitez styliser les deux premières colonnes d'une table, utilisez les éléments <colgroup> et <col> .
| LUN | MAR | MER | JEU | VEN | SAM | DIM |
|---|---|---|---|---|---|---|
| 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 des colonnes.
Chaque groupe est spécifié avec un élément <col> .
L'attribut span indique combien de colonnes reçoivent le style.
L'attribut style définit le style à appliquer 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>LUN</th>
<th>MAR</th>
<th>MER</th>
<th>JEU</th>
... Remarque : La balise <colgroup> doit être un enfant d'un élément <table> et doit être placée avant tout autre élément de table, 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'y a qu'une sélection très limitée de propriétés CSS qui peuvent être utilisées dans le colgroup :
La propriété width
La propriété visibility
Les propriétés background
Les propriétés border
Toutes les autres propriétés CSS n'auront aucun effet sur vos tables.
Éléments Col Multiples
Si vous souhaitez styliser plusieurs colonnes avec des styles différents, utilisez plusieurs é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>LUN</th>
<th>MAR</th>
<th>MER</th>
<th>JEU</th>
... Colgroups Vides
Si vous souhaitez styliser des colonnes au milieu d'une table, insérez un élément "vide" <col> (sans styles) pour les colonnes précédentes :
Exemple
<table>
<colgroup>
<col span="3">
<col span="2" style="background-color: pink">
</colgroup>
<tr>
<th>LUN</th>
<th>MAR</th>
<th>MER</th>
<th>JEU</th>
... Masquer des Colonnes
Vous pouvez masquer des colonnes avec la propriété visibility: collapse :
Exemple
<table>
<colgroup>
<col span="2">
<col span="3" style="visibility: collapse">
</colgroup>
<tr>
<th>LUN</th>
<th>MAR</th>
<th>MER</th>
<th>JEU</th>
...