🎨 Formatação de Tabelas HTML

Introdução

A formatação de tabelas permite melhorar a aparência visual, organização e experiência do usuário ao visualizar informações.

Com HTML definimos a estrutura da tabela e com CSS controlamos cores, espaçamentos, bordas e alinhamentos.

Estrutura HTML + CSS

<table>

<tr>
  <th>Nome</th>
  <th>Curso</th>
</tr>

<tr>
  <td>Ana</td>
  <td>HTML</td>
</tr>

</table>

O HTML cria a estrutura e o CSS define o visual.

Bordas em Tabelas

As bordas ajudam a separar visualmente linhas e colunas.

table {

border: 1px solid black;

}

Border Collapse

A propriedade border-collapse controla a união das bordas.

table {

border-collapse:
collapse;

}

Espaçamento Interno

O espaçamento interno é definido através da propriedade padding.

td {

padding: 10px;

}

Alinhamento de Texto

Podemos controlar o posicionamento dos textos.

td {

text-align:center;

}

Cores em Tabelas

As cores ajudam a destacar informações importantes.

th {

background-color:
#333;

color:
white;

}

Efeito Zebra

O efeito zebra alterna cores nas linhas facilitando a leitura.

tr:nth-child(even){

background:
#f2f2f2;

}

Destacar Linha ao Passar o Mouse

O efeito hover melhora a interação do usuário.

tr:hover{

background:
#ddd;

}

Altura e Largura

Podemos controlar dimensões das células.

table{

width:
100%;

}

td{

height:
40px;

}

Aplicações Profissionais

• Dashboards administrativos.
• Relatórios empresariais.
• Sistemas acadêmicos.
• Controle financeiro.
• Gestão de informações.

Boas Práticas

• Utilizar contraste adequado.
• Manter tabelas limpas.
• Evitar excesso de cores.
• Garantir leitura em dispositivos móveis.
• Usar CSS separado do HTML.

Erros Comuns

Resumo