Grupo de tabela HTML
O <colgroup>
elemento é usado para estilizar colunas específicas de uma tabela.
Grupo de tabela HTML
Se você quiser estilizar as duas primeiras colunas de uma tabela, use os elementos <colgroup>
e <col>
.
SEG | TER | CASAR | RECOLHER | SEX | SENTADO | SOL |
---|---|---|---|---|---|---|
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 |
O <colgroup>
elemento deve ser usado como um contêiner para as especificações da coluna.
Cada grupo é especificado com um <col>
elemento.
O span
atributo especifica quantas colunas obtém o estilo.
O style
atributo especifica o estilo para fornecer as colunas.
Nota: Há uma seleção muito limitada de propriedades CSS legais para colgroups .
Exemplo
<table>
<colgroup>
<col span="2"
style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Nota: A <colgroup>
tag deve ser filha de um <table>
elemento e deve ser colocada antes de qualquer outro elemento da tabela, como <thead>
,
<tr>
, <td>
etc., mas depois do <caption>
elemento, se presente.
Propriedades legais de CSS
Há apenas uma seleção muito limitada de propriedades CSS que podem ser usadas no colgroup:
width
propriedades
visibility
propriedades
background
propriedades
border
propriedades
Todas as outras propriedades CSS não terão efeito em suas tabelas.
Vários elementos de coluna
Se você quiser estilizar mais colunas com estilos diferentes, use mais
<col>
elementos dentro do
<colgroup>
:
Exemplo
<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>
...
Grupos vazios
Se você quiser estilizar colunas no meio de uma tabela, insira um elemento "vazio"
<col>
(sem estilos) para as colunas anteriores:
Exemplo
<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>
...
Ocultar colunas
Você pode ocultar colunas com a visibility: collapse
propriedade:
Exemplo
<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>
...