HTML colgroup

Postado: 14 de abril de 2022

HTML colgroup

A tag HTML <colgroup> agrupa um conjunto de colunas em uma tabela HTML para que você possa aplicar formatação ou adicionar classes ao grupo em vez de cada célula individual.

Definição e uso da Tag <colgroup>.

A Tag <colgroup> especifica um grupo de uma ou mais colunas em uma tabela para formatação.

A Tag <colgroup> é útil para aplicar estilos a colunas inteiras, em vez de repetir os estilos para cada célula, para cada linha.

Observação: a tag <colgroup> deve ser filha de um elemento <table>, após qualquer elemento <caption> e antes de qualquer elemento <thead>, <tbody>, <tfoot> e <tr>.

Para definir diferentes propriedades para uma coluna dentro de um <colgroup>, use a tag <col> dentro da tag <colgroup>.

Veja o exemplo no código Html.

Para definir a cor de fundo das três colunas com as tags <colgroup> e <col>:

<table>
  <colgroup>
    <col style="background-color:yellow; ">
    <col style="background-color:orange; ">
    <col style="background-color:green; ">
  </colgroup>
  <tr>
    <th>Frutas</th>
    <th>Legumes</th>
    <th>Verduras</th>
  </tr>
  <tr>
    <td>Morango</td>
    <td>Batata</td>
    <td>Couve</td>
  </tr>
</table>

Veja outro exemplo!

Se você quiser que as duas colunas fique da mesma cor adicione o <col span="2">.

<table>
  <colgroup>
    <col span="2" style="background-color:yellow;">
    <col style="background-color:green;">
  </colgroup>
  <tr>
    <th>Frutas</th>
    <th>Legumes</th>
    <th>Verduras</th>
  </tr>
  <tr>
    <td>Morango</td>
    <td>Batata</td>
    <td>Couve</td>
  </tr>
</table>

Neste Artigo Abordamos sobre a tag HTML colgroup.

Veja Outros Artigos Relacionados Sobre Html Table.

Publicado por: loopnerd

116 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado.

Artigos Relacionados