Dominando as Colunas de Tabelas HTML

Introdução

A tag HTML <col> é usada para definir as propriedades de cada coluna de uma tabela separadamente. Neste laboratório, você aprenderá como usar a tag <col> para estilizar colunas de uma tabela HTML.

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 uma tabela HTML

No arquivo index.html do seu projeto, adicione o seguinte código para criar uma tabela HTML básica:

<table>
  <colgroup>
    <col />
    <col />
    <col />
  </colgroup>
  <tr>
    <th>Product Name</th>
    <th>Price</th>
    <th>Quantity</th>
  </tr>
  <tr>
    <td>Product 1</td>
    <td>$10</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Product 2</td>
    <td>$20</td>
    <td>10</td>
  </tr>
</table>

Estilizando colunas com a tag `<col>`

Agora, vamos adicionar a tag <col> para estilizar as colunas da tabela. Substitua a tag <colgroup> no código acima pelo seguinte código:

<colgroup>
  <col style="background-color: lightblue" />
  <col style="background-color: lightgreen" />
  <col style="background-color: lightpink" />
</colgroup>

No código acima, adicionamos a tag <col> com o atributo style para aplicar diferentes cores de fundo a cada coluna da tabela.

Usando o atributo span

Você pode usar o atributo span da tag <col> para atingir múltiplas colunas de uma vez. Por exemplo:

<colgroup>
  <col style="background-color: lightblue" />
  <col span="2" style="background-color: lightgreen" />
</colgroup>

Neste exemplo, a segunda tag <col> atinge duas colunas de uma vez usando o atributo span com o valor 2.

Usando Atributos Globais e de Evento

A tag <col> suporta atributos globais e atributos de evento para adicionar estilo e funcionalidade adicionais às colunas da tabela. Por exemplo, você pode usar o atributo class para adicionar uma classe CSS às colunas:

<colgroup>
  <col style="background-color: lightblue" class="product-name" />
  <col span="2" style="background-color: lightgreen" class="price-quantity" />
</colgroup>

Agora, você pode aplicar estilos CSS às colunas da tabela usando as classes .product-name e .price-quantity.

Adicionando Unidades às Colunas da Tabela

Você pode adicionar unidades às colunas da tabela, como valores de moeda ou porcentagem, usando os pseudo-elementos ::before e ::after e CSS. Por exemplo:

<colgroup>
  <col style="background-color: lightblue" class="product-name" />
  <col span="2" style="background-color: lightgreen" class="price-quantity" />
</colgroup>

td::before {
  content: "$";
}

td:last-of-type::after {
  content: "%";
}

No código acima, o pseudo-elemento ::before adiciona um sinal de dólar antes dos valores nas duas primeiras colunas, enquanto o pseudo-elemento ::after adiciona um sinal de porcentagem após os valores na última coluna.

Resumo

Neste laboratório, você aprendeu como usar a tag HTML <col> para estilizar colunas de uma tabela HTML. Você também aprendeu como usar o atributo span, atributos globais e atributos de evento para adicionar estilo e funcionalidade adicionais às colunas da tabela. Finalmente, você aprendeu como adicionar unidades às colunas da tabela usando CSS e pseudo-elementos.

Coluna de Tabela HTML