📊 Formatação de Tabelas CSS

Introdução

As tabelas HTML são utilizadas para organizar informações em linhas e colunas.

Com CSS podemos transformar tabelas simples em componentes modernos, responsivos e fáceis de visualizar.

Estrutura Básica de uma Tabela

<table>

  <tr>

    <th>Nome</th>

    <th>Idade</th>

  </tr>


  <tr>

    <td>Ana</td>

    <td>20</td>

  </tr>

</table>

Principais Propriedades CSS para Tabelas

Aplicando Bordas

A propriedade border adiciona linhas na tabela.

table {

border:1px solid black;

}


td,
th {

border:1px solid black;

}

Unindo Bordas - border-collapse

Por padrão, cada célula possui sua própria borda.

table {

border-collapse:collapse;

}

As bordas ficam agrupadas formando uma tabela mais profissional.

Espaçamento Interno das Células

A propriedade padding melhora a leitura.

td,
th {

padding:15px;

}

Alinhamento do Texto

td {

text-align:center;

}

Estilizando o Cabeçalho

th {

background:#1f4e79;

color:white;

}

Cabeçalhos destacados facilitam a identificação das informações.

Linhas Alternadas

O seletor nth-child cria efeitos de zebra.

tr:nth-child(even){

background:#f2f2f2;

}

Efeito ao Passar o Mouse

tr:hover {

background:#ddd;

}

Muito utilizado em tabelas administrativas.

Largura das Colunas

table {

width:100%;

}

A tabela ocupa todo espaço disponível.

Altura das Linhas

tr {

height:50px;

}

Bordas Arredondadas

Podemos criar tabelas com aparência moderna.

table {

border-radius:10px;

overflow:hidden;

}

Tabela Responsiva

Em telas pequenas, tabelas podem precisar de rolagem horizontal.

.container-tabela {

overflow-x:auto;

}

Exemplo Profissional

table {

width:100%;

border-collapse:collapse;

}


th {

background:#1f4e79;

color:white;

padding:12px;

}


td {

padding:10px;

border-bottom:1px solid #ddd;

}

Aplicação em Sistemas

Boas Práticas

• Usar cabeçalhos claros.
• Manter bom contraste.
• Evitar excesso de informação.
• Criar versão responsiva.
• Usar HTML semântico.

Erros Comuns

Resumo Final