Groupe de colonnes de tableau HTML
L' <colgroup>élément est utilisé pour styliser des colonnes spécifiques d'un tableau.
Groupe de colonnes de tableau HTML
Si vous souhaitez styliser les deux premières colonnes d'un tableau, utilisez les éléments <colgroup>
et <col>
.
| LUN | MAR | MER | COLLECTER | VEN | SAM | SOLEIL |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | sept |
| 8 | 9 | dix | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
L' <colgroup>élément doit être utilisé comme conteneur pour les spécifications de colonne.
Chaque groupe est spécifié avec un <col>élément.
L' spanattribut spécifie le nombre de colonnes qui obtient le style.
L' styleattribut 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>
...
Remarque : La <colgroup>balise doit être un enfant d'un <table>élément et doit être placée avant tout autre élément de table, comme <thead>,
<tr>, <td>
etc., mais après l' <caption>élément, 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 :
widthpropriété
visibilitypropriété
backgroundpropriétés
borderpropriétés
Toutes les autres propriétés CSS n'auront aucun effet sur vos tableaux.
Plusieurs éléments Col
Si vous souhaitez styliser plus de colonnes avec des styles différents, utilisez plus d'
<col>éléments à 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>
...
Colgroups vides
Si vous souhaitez styliser les colonnes au milieu d'un tableau, insérez un élément "vide"
<col>(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>
...
Masquer les colonnes
Vous pouvez masquer des colonnes avec la visibility: collapsepropriété :
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>
...