Tag Colgroup em tabelas Html
Hoje abordaremos o HTML Table Colgroup. Usando exemplos , esperamos atingir os objetivos de aprendizado.
A tag <colgroup> em HTML é usada para agrupar um conjunto de colunas da tabela para fins de formatação. Normalmente é usado em conjunto com as tags <table> e <col> para definir a apresentação visual de uma tabela.
A tag colgroup <colgroup> da tabela HTML é empregada para definir colunas específicas da tabela.
Aqui está um exemplo de como usar a tag <colgroup> em HTML:
Example:
Tabela de HTML Colgroup
Quando precisar modificar as duas primeiras colunas de uma tabela, use as tags <colgroup> e <col> .
| SEG | TER | QUA | QUI | 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 |
A tag colgroup <colgroup> da tabela HTML pode servir como contêiner de funcionalidade de colunas. A tag <col> é usada para indicar cada grupo.
Usando o atributo span, você pode controlar quantas colunas são afetadas pela formatação. Para cada coluna, o estilo pode ser definido com o atributo style.
Example:
IMPORTANTE: Cada tag <colgroup> deve ser o primeiro filho da tag <table> e aparecer após a legenda, se houver, mas antes de quaisquer outras tags de tabela como <thead> , <tr>, <td> , etc.
Propriedades CSS
O colgroup permite apenas o uso de um número muito pequeno de propriedades CSS, incluindo:
As seguintes propriedades CSS podem ser usadas para estilizar as colunas dentro de um <colgroup>:
-
background-color: Define a cor de fundo das colunas dentro do <colgroup>.
- width: Define a largura das colunas dentro do <colgroup>.
- text-align: define o alinhamento horizontal do texto dentro das colunas.
- vertical-align: define o alinhamento vertical do conteúdo dentro das colunas.
- border : Define as propriedades de borda para as colunas dentro do <colgroup>.
- padding: Define as propriedades de preenchimento para as colunas dentro do <colgroup>.
-
margin: Define as propriedades de margem para as colunas dentro do <colgroup>.
Ocultar colunas
Existem várias maneiras de ocultar uma coluna em uma tabela HTML.
Para ocultar um grupo de colunas em uma tabela HTML, você pode definir a propriedade display do elemento <colgroup> como nenhum usando CSS:
Example:
Grupos de col vazios
Aqui está um exemplo de uma tag <colgroup> vazia sendo usada para definir a cor de fundo de todas as colunas em uma tabela:
Example:
Vários elementos col
Use várias tags <col> dentro do <colgroup> se quiser estilizar colunas adicionais de várias maneiras:
Example:
Como alternativa, você pode definir a propriedade de visibilidade do elemento <colgroup> como oculto:
Example:
Vantagens do Colgroup da Tabela HTML
A tag <colgroup> em HTML oferece várias vantagens para desenvolvedores web e criadores de conteúdo:
- A tag <colgroup> permite que os desenvolvedores agrupem as colunas da tabela e apliquem estilo a todo o grupo, facilitando a criação de layouts de tabela consistentes e visualmente atraentes.
- A tag <colgroup> elimina a necessidade de adicionar atributos de estilo a cada tag <col> individual, o que pode resultar em uma marcação de tabela mais limpa e gerenciável.
- Ao reduzir a quantidade de marcação necessária para estilizar uma tabela, a tag <colgroup> pode ajudar a acelerar o tempo de carregamento da página e melhorar o desempenho geral do site.
- A tag <colgroup> pode ser usada para atribuir classes ou IDs específicos às colunas da tabela, o que pode melhorar a acessibilidade das tabelas para usuários com deficiências, como aqueles que usam leitores de tela.
- A tag <colgroup> permite que os desenvolvedores apliquem estilos a várias colunas de uma só vez, facilitando o ajuste do layout de uma tabela conforme necessário, sem a necessidade de fazer alterações em cada coluna individual.
