Definição e uso de: <COLGROUP></COLGROUP>
HTML com Estilo
O marcador <COLGROUP></COLGROUP> "Table Column Group Element" ou grupo de colunas de uma tabela HTML, é o marcador onde se coloca propriedades ou formatações que serão "herdadas" pelas colunas que fazem parte daquele grupo de colunas.
A tag <COLGROUP></COLGROUP> somente é permitida como marcador de uma tabela.
A tag <COLGROUP></COLGROUP> é codificada após a tag <CAPTION ></CAPTION>, caso essa tag venha a ser utilizada, mas, antes de qualquer outra tag de uma tabela, quais sejam, <TR></TR>, <td></TD>, <THEAD></THEAD>, <TH></TH>, <TBODY></TBODY> ou <TFOOT></TFOOT>.
As propriedades das tags <COLGROUP></COLGROUP> são similares às propriedades das tags <COL /> quanto aos alinhamentos dos conteúdos das células.
O marcador <COLGROUP></COLGROUP> é de grande utilidade para se fazer marcação de grupos de colunas inteiras sem a necessidade de definir essas marcações em cada coluna separadamente.
É importante lembrar que nos navegadores Internet Explorer e Opera as propriedades destacadas nas tags <COLGROUP></COLGROUP> sobrepõem às propriedades destacadas nas tags <TR><TR/>, o que não acontece com os navegadores Chrome, Firefox e Safari. Por isso cuidado quando usar a tag <COLGROUP></COLGROUP>. Faça testes nos cinco navegadores e se for o caso opte por uma configuração das células mais detalhada.
As propriedades das tags <COLGROUP></COLGROUP> podem ser expandidas para vários grupos de colunas que sejam adjacentes destacando esta propriedade dentro da tag <colgroup valign="middle" span="2" align="right">.
<table width="650" border="1" cellspacing="0" cellpadding="2" bordercolor="Black" style="font-family: Arial, Verdana, Geneva, Helvetica, sans-serif; font-size: 11px;">
<caption style="color:#000;">Produtos Recebidos</caption>
<colgroup align="right">
<col align="center" style="background-color: #FFFF66;">
<col style="background-color: #0099ff;" />
<col style="background-color: #0099ff;" />
<col style="background-color: #996666;" />
<col style="background-color: #996666;" />
<col style="background-color: #66ccff;" />
<col style="background-color: #66ccff;" />
<col style="background-color: #ffcc33;" />
<col style="background-color: #ffcc33;" /></colgroup>
<tr align="center" style="background-color: #ff8000; font-weight: bold;">
<td>Data</td>
<td>Prod A <br />Quantidade</td>
<td>Nível de<br />Qualidade</td>
<td>Prod B <br />Quantidade</td>
<td>Nível de <br />Qualidade</td>
<td>Prod C <br />Quantidade</td>
<td>Nível de <br />Qualidade</td>
<td>Prod D <br />Quantidade</td>
<td>Nível de <br />Qualidade</td></tr>
<tr>
<td>30/05/11</td>
<td>100</td>
<td>Bom</td>
<td>125</td>
<td>Ótimo</td>
<td>55</td>
<td>Bom</td>
<td>75</td>
<td>Bom</td></tr>
<tr>
<td>31/05/11</td>
<td>110</td>
<td>Bom</td>
<td>105</td>
<td>Bom</td>
<td>80</td>
<td>Ótimo</td>
<td>95</td>
<td>Bom</td></tr>
<tr>
<td>Média</td>
<td>105</td>
<td>Bom</td>
<td>115</td>
<td>Bom</td>
<td>67</td>
<td>Ótimo</td>
<td>85</td>
<td>Bom</td></tr></table>
O código fonte acima será visualizado assim no navegador:
Visualize esta página em navegadores diferentes para verificar as diferenças.
Produtos Recebidos
Data
Prod A
Quantidade
Nível de
Qualidade
Prod B
Quantidade
Nível de
Qualidade
Prod C
Quantidade
Nível de
Qualidade
Prod D
Quantidade
Nível de
Qualidade
30/05/11
100
Bom
125
Ótimo
55
Bom
75
Bom
31/05/11
110
Bom
105
Bom
80
Ótimo
95
Bom
Média
105
Bom
115
Bom
67
Ótimo
85
Bom