Resumo Completo sobre Tabelas em HTML e CSS

1. Estrutura Básica de uma Tabela

Uma tabela HTML é composta por:

• <table>: elemento pai da tabela
• <thead>: cabeçalho da tabela
• <tbody>: corpo da tabela
• <tr>: linha da tabela
• <th>: célula de cabeçalho (normalmente no thead)
• <td>: célula de dados (no tbody)

<table>
  <thead>
    <tr>
      <th>Cabeçalho 1</th>
      <th>Cabeçalho 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Dado 1</td>
      <td>Dado 2</td>
    </tr>
  </tbody>
</table>

2. Estilização Básica

Para uma tabela visualmente agradável, use:

• border-collapse: collapse; para bordas unidas
• bordas nas células com border
• padding para espaçamento interno
• alinhamento vertical com vertical-align
• estilo para cabeçalho (thead) com fundo e cor diferente

3. Efeito Zebrado com nth-child(2n)

tbody tr:nth-child(2n) {
  background-color: #f9f9f9;
}

4. Outros Efeitos Comuns

• Hover: destacar linha quando o mouse passa por cima
• Alinhamento vertical: usar vertical-align: middle; para centralizar texto verticalmente
• Bordas: garantir bordas claras e bem definidas

tbody tr:hover {
  background-color: #d1e7fd;
}

th, td {
  vertical-align: middle;
}

5. Tabela Responsiva Simples

Para tabelas com muitas colunas, use um container com overflow-x: auto; para permitir scroll horizontal em telas pequenas.

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

6. Cabeçalho fixo no topo da página (Sticky Header)

Para deixar o cabeçalho da tabela fixo no topo enquanto você rola o conteúdo da tabela, use position: sticky; no <thead> com top: 0;.

Isso funciona melhor se a tabela estiver dentro de um container com altura fixa e overflow-y: auto;, para que o scroll seja interno.

thead {
  position: sticky;
  top: 0;
  background-color: #34495e; /* importante para visual */
  color: white;
  z-index: 10; /* para ficar sobre as linhas */
}

.container-tabela {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #ccc;
}

7. Usando colspan e rowspan em tabelas

colspan é usado para fazer uma célula ocupar duas ou mais colunas.

rowspan é usado para fazer uma célula ocupar duas ou mais linhas.

🔸 Exemplo com colspan:

<th colspan="2">Contato</th>

🔸 Exemplo com rowspan:

<td rowspan="2">Segunda</td>

Esses atributos são úteis quando você precisa organizar melhor visualmente dados agrupados na tabela.

8. Estilizando colunas com <colgroup> e <col>

A tag <colgroup> é usada dentro da tabela para aplicar estilos diretamente às colunas, sem precisar estilizar célula por célula. Ela contém uma ou mais tags <col>, que representam cada coluna da tabela, na ordem em que aparecem.

Você pode aplicar estilos como largura, cor de fundo ou bordas usando atributos inline ou classes CSS.

🔸 Exemplo prático com estilos por coluna:

<table>
  <colgroup>
    <col style="background-color: #f2f2f2; width: 200px;">
    <col style="background-color: #dff0d8;">
    <col>
  </colgroup>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

🔸 Usando span para aplicar a várias colunas

Você pode aplicar o mesmo estilo a várias colunas usando o atributo span:

<colgroup>
  <col span="2" style="background-color: #e0f7fa;">
  <col>
</colgroup>

Nesse exemplo, as duas primeiras colunas receberão a mesma cor de fundo.

9. Tabela Responsiva com Scroll Horizontal

Por padrão, tabelas em HTML não são responsivas. Para que funcionem bem em telas pequenas (como celular), é comum colocá-las dentro de um <div> com rolagem horizontal usando overflow-x: auto.

🧠 Dica:

Use min-width na tabela e white-space: nowrap nas células para forçar a rolagem horizontal quando necessário.

📱 Comportamento:

• Em telas grandes, a tabela aparece normalmente.
• Em telas pequenas, o usuário pode rolar horizontalmente para ver todas as colunas.