Dominando o Agrupamento de Colunas em Tabelas HTML - Guia Completo

Introdução

A tag HTML <colgroup> é usada para aplicar vários estilos a uma ou mais colunas em uma tabela HTML. A tag <colgroup> elimina a necessidade de definir estilos em cada célula de uma tabela. Usando o atributo span desta tag, você pode aplicar estilos às colunas nas quais deseja aplicá-los.

Neste laboratório, você aprenderá como criar uma tabela com colunas coloridas usando a tag HTML <colgroup>.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Criando a Tabela HTML

Primeiro, crie uma tabela HTML à qual você deseja aplicar estilos usando a tag <colgroup>. Adicione o seguinte código ao seu arquivo HTML:

<!doctype html>
<html>
  <head>
    <title>Colored Table</title>
  </head>
  <body>
    <table border="1">
      <caption>
        Colored Table
      </caption>
      <colgroup>
        <col style="background-color: gray;" />
        <col style="background-color: lightblue;" />
        <col style="background-color: lightgreen;" />
      </colgroup>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Row 1, Column 1</td>
          <td>Row 1, Column 2</td>
          <td>Row 1, Column 3</td>
        </tr>
        <tr>
          <td>Row 2, Column 1</td>
          <td>Row 2, Column 2</td>
          <td>Row 2, Column 3</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

O código acima cria uma tabela com uma borda de 1 e uma legenda "Colored Table". A tag <colgroup> contém três tags <col> que aplicam cores diferentes a três colunas, respectivamente. A tag <thead> contém três tags <th> que contêm os títulos das três colunas. E a tag <tbody> contém duas linhas com três colunas cada.

Escrevendo CSS para Melhor Estilização

Nesta etapa, usaremos CSS para aplicar estilos à tabela criada acima.

Adicione o seguinte código CSS ao seu arquivo HTML:

<!doctype html>
<html>
  <head>
    <title>Colored Table</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 8px;
        text-align: left;
        border-bottom: 1px solid #ddd;
      }
      th {
        background-color: #4169e1;
        color: white;
      }
    </style>
  </head>
  <body>
    <table border="1">
      <caption>
        Colored Table
      </caption>
      <colgroup>
        <col style="background-color: gray;" />
        <col style="background-color: lightblue;" />
        <col style="background-color: lightgreen;" />
      </colgroup>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Row 1, Column 1</td>
          <td>Row 1, Column 2</td>
          <td>Row 1, Column 3</td>
        </tr>
        <tr>
          <td>Row 2, Column 1</td>
          <td>Row 2, Column 2</td>
          <td>Row 2, Column 3</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Revise o código completo em seu arquivo index.html. Você deverá ser capaz de ver a tabela de três colunas com cores diferentes em cada coluna.

Resumo

A tag HTML <colgroup> é usada para aplicar vários estilos a uma ou mais colunas de uma tabela em HTML, eliminando a necessidade de definir estilos em cada célula de uma tabela. Neste laboratório, você aprendeu como criar uma tabela com colunas coloridas usando a tag <colgroup> e aplicar estilos a ela usando CSS.