Tabelas

As tabelas são uma forma poderosa de exibir dados em uma página web. No entanto, por padrão, as tabelas HTML podem parecer um pouco monótonas. Felizmente, com CSS (Cascading Style Sheets), é possível estilizar tabelas e torná-las mais atraentes e acessíveis. Neste artigo, vamos explorar técnicas modernas para criar tabelas estilizadas usando CSS, tornando seus dados mais legíveis e visualmente agradáveis.

1. Estrutura Básica de uma Tabela HTML

Antes de aplicar estilos, é importante entender a estrutura básica de uma tabela HTML:

<table>
  <tr>
    <th>Coluna 1</th>
    <th>Coluna 2</th>
    <th>Coluna 3</th>
  </tr>
  <tr>
    <td>Dado 1</td>
    <td>Dado 2</td>
    <td>Dado 3</td>
  </tr>
</table>

Neste exemplo, <th> representa cabeçalhos de coluna e <td> representa dados de tabela.

2. Estilizando Tabelas com CSS

a. Estilo de Fundo e Texto

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 12px;
    text-align: left;
}

th {
    background-color: #007bff;
    color: #ffffff;
}

Neste exemplo, border-collapse: collapse; remove as bordas entre células adjacentes. padding adiciona espaço interno às células e background-color altera a cor de fundo dos cabeçalhos de coluna.

b. Estilo de Alternância de Linhas

tr:nth-child(even) {
    background-color: #f2f2f2;
}

Esta regra CSS alterna a cor de fundo das linhas da tabela para criar uma melhor distinção visual entre elas.

c. Estilo de Bordas

th, td {
    border: 1px solid #dddddd;
}

Adiciona bordas a todas as células da tabela para criar uma separação visual.

3. Conclusão

Estilizar tabelas com CSS é uma maneira eficaz de melhorar a legibilidade dos dados e melhorar a aparência geral de um site. Ao aplicar técnicas modernas, como alternância de cores e bordas sutis, você pode criar tabelas visualmente atraentes e fáceis de ler. Lembre-se de ajustar as cores, tamanhos e estilos para se adequarem ao design geral do seu site. Com essas técnicas em mãos, você pode transformar suas tabelas de dados em elementos visuais elegantes e informativos em suas páginas web.