Colgroup di tabelle HTML
L' <colgroup>elemento viene utilizzato per definire lo stile di colonne specifiche di una tabella.
Colgroup di tabelle HTML
Se vuoi dare uno stile alle due prime colonne di una tabella, usa gli elementi <colgroup>
e <col>
.
| LUN | MAR | MER | RACCOGLIERE | VEN | SAB | SOLE |
|---|---|---|---|---|---|---|
| 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' <colgroup>elemento deve essere utilizzato come contenitore per le specifiche della colonna.
Ogni gruppo è specificato con un <col>elemento.
L' spanattributo specifica quante colonne ottengono lo stile.
L' styleattributo specifica lo stile da assegnare alle colonne.
Nota: esiste una selezione molto limitata di proprietà CSS legali per i colgroup .
Esempio
<table>
<colgroup>
<col span="2"
style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Nota: il <colgroup>tag deve essere figlio di un <table>elemento e deve essere posizionato prima di qualsiasi altro elemento della tabella, come <thead>,
<tr>, <td>
ecc., ma dopo l' <caption>elemento, se presente.
Proprietà CSS legali
C'è solo una selezione molto limitata di proprietà CSS che possono essere utilizzate nel colgroup:
widthproprietà
visibilityproprietà
backgroundproprietà
borderproprietà
Tutte le altre proprietà CSS non avranno alcun effetto sulle tue tabelle.
Elementi Col multipli
Se vuoi dare uno stile a più colonne con stili diversi, usa più
<col>elementi all'interno di
<colgroup>:
Esempio
<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>
...
Colgroup vuoti
Se vuoi dare uno stile alle colonne nel mezzo di una tabella, inserisci un
<col>elemento "vuoto" (senza stili) per le colonne prima:
Esempio
<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>
...
Nascondi colonne
Puoi nascondere le colonne con la visibility: collapseproprietà:
Esempio
<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>
...