Tabelas no CSS

Tempo de leitura: 4 minutos

Tabelas no CSS: As tabelas HTML, embora tenham caído em desuso para layout de páginas, ainda são amplamente utilizadas para apresentar dados de forma organizada e estruturada. O CSS (Cascading Style Sheets) oferece um conjunto robusto de ferramentas para estilizar tabelas, tornando-as mais visuais e atraentes.

Neste artigo, vamos explorar as diversas formas de personalizar tabelas com CSS, desde a estrutura básica até estilos mais complexos.

Estrutura Básica de uma Tabela HTML

Antes de mergulharmos no CSS, é importante entender a estrutura básica de uma tabela HTML:

HTML

<table>
  <caption>Título da Tabela</caption>
  <thead>
    <tr>
      <th>Cabeçalho 1</th>
      <th>Cabeçalho 2</th>
      <th>Cabeçalho 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Dado 1</td>
      <td>Dado 2</td>
      <td>Dado 3</td>
    </tr>
    <tr>
      <td>Dado 4</td>
      <td>Dado 5</td>
      <td>Dado 6</td>
    </tr>
  </tbody>   
</table>

• <table>: Define o início da tabela.
• <caption>: Define o título da tabela.
• <thead>: Contém a linha de cabeçalho.
• <tr>: Define uma linha na tabela.
• <th>: Define uma célula de cabeçalho.
• <tbody>: Contém as linhas de dados da tabela.
• <td>: Define uma célula de dados.

Estilizando Tabelas com CSS

Com CSS, podemos personalizar praticamente todos os aspectos de uma tabela, como:

• Bordas: Definir espessura, estilo e cor das bordas.
• Cores: Definir cores de fundo para células, linhas e cabeçalhos.
• Fontes: Definir fontes, tamanhos e cores para o texto.
• Alinhamento: Alinhar o texto dentro das células horizontal e verticalmente.
• Espaçamento: Controlar o espaço entre as células e linhas.
• Layout: Criar layouts mais complexos com tabelas aninhadas e colspans/rowspans.

Exemplos de Estilização

CSS

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

th, td {
  border: 1px solid black;
  padding: 15px;
  text-align: center;
}

th {
  background-color: #f2f2f2;
}

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

• border-collapse: collapse: Remove os espaços entre as bordas das células.
• width: 100%;: Faz com que a tabela ocupe 100% da largura do container.
• padding: Adiciona espaço interno às células.
• text-align: Alinha o texto dentro das células.
• background-color: Define a cor de fundo para as células.
• tr:nth-child(even): Seleciona todas as linhas pares e aplica um estilo diferente.

Estilos Avançados

• Tabelas Responsivas: Utilizar media queries para ajustar o layout da tabela para diferentes tamanhos de tela.
• Tabelas Aninhadas: Criar tabelas dentro de tabelas para organizar dados complexos.
• Colspan e Rowspan: Mesclar células horizontalmente (colspan) ou verticalmente (rowspan).
• Tabelas Estilizadas: Utilizar pseudo-classes como :hover e :focus para criar efeitos interativos.

Alternativas ao Uso de Tabelas para Layout

Embora as tabelas sejam úteis para apresentar dados, elas não são a melhor opção para criar layouts complexos. Para layouts, é recomendado utilizar:

• Divs e CSS: Criar layouts flexíveis e responsivos usando divs e as propriedades de posicionamento do CSS.
• Flexbox: Um modelo de layout unidimensional que permite organizar itens flex em uma única direção.
• Grid: Um sistema de layout bidimensional que permite criar layouts complexos e responsivos.

Quando Usar Tabelas?

• Apresentação de dados: Tabelas são ideais para apresentar dados em formato tabular, como planilhas, listas de preços, etc.
• Acessibilidade: Leitores de tela e outros dispositivos de assistência geralmente interpretam tabelas de forma mais eficiente.

Conclusão

Tabelas no CSS: O CSS oferece uma ampla gama de ferramentas para personalizar e estilizar tabelas. Ao dominar os conceitos básicos e as propriedades mais avançadas, você poderá criar tabelas visuais e informativas que aprimoram a experiência do usuário.

No entanto, é importante lembrar que para layouts complexos, o uso de divs e técnicas como Flexbox e Grid são mais adequadas. Ao escolher a ferramenta certa, você garante que seus designs sejam eficientes, acessíveis e responsivos.

Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo:

E se você gosta do nosso conteúdo, não deixe de contribuir adquirindo os serviços e produtos dos nossos apoiadores e empresas que somos associados: