Tutorial HTML

HTML HOME Introdução HTML Editores de HTML HTML básico Elementos HTML Atributos HTML Títulos HTML Parágrafos HTML Estilos HTML Formatação HTML Cotações HTML Comentários HTML Cores HTML HTML CSS Links HTML Imagens HTML HTML Favicon Tabelas HTML Listas HTML Bloco HTML e Inline Classes HTML Código HTML Iframes HTML JavaScript HTML Caminhos de arquivo HTML Cabeçalho HTML Esquema HTML HTML Responsivo Código de computador HTML Semântica HTML Guia de estilo HTML Entidades HTML Símbolos HTML Emojis HTML Conjunto de caracteres HTML Codificação de URL HTML HTML vs. XHTML

Formulários HTML

Formulários HTML Atributos de formulário HTML Elementos de formulário HTML Tipos de entrada HTML Atributos de entrada HTML Atributos do formulário de entrada HTML

Gráficos HTML

Tela HTML HTML SVG

Mídia HTML

Mídia HTML Vídeo HTML Áudio HTML Plug-ins HTML HTML YouTube

APIs HTML

Geolocalização HTML Arrastar/Soltar HTML Armazenamento Web HTML Trabalhadores da Web HTML HTML SSE

Exemplos HTML

Exemplos HTML Questionário HTML Exercícios HTML Certificado HTML Resumo HTML Acessibilidade HTML

Referências HTML

Lista de tags HTML Atributos HTML Atributos Globais HTML Suporte ao navegador HTML Eventos HTML Cores HTML Tela HTML Áudio/vídeo HTML Tipos de documento HTML Conjuntos de caracteres HTML Codificação de URL HTML Códigos HTML Lang Mensagens HTTP Métodos HTTP PX to EM Converter Atalhos do teclado

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 spanatributo especifica quantas colunas obtém o estilo.

O styleatributo 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:

widthpropriedades
visibilitypropriedades
backgroundpropriedades
borderpropriedades

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: collapsepropriedade:

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>
...