Estilizando tabelas usando CSS
A fim de deixar nossas tabelas mais atrativas e adequadas ao design da página, podemos aplicar estilos CSS nelas.
Através do CSS, podemos alterar cores, fontes, margens, bordas e outros elementos visuais das tabelas.
Primeiramente, é necessário selecionar a tabela que desejamos estilizar. Isso pode ser feito utilizando o seletor de classe ou o seletor de ID.
Por exemplo, para estilizar uma tabela com a classe “tabela-estilizada”, utilizamos o seletor .tabela-estilizada
no CSS. Se a tabela tiver o ID “tabela1”, utilizamos o seletor #tabela1
no CSS.
Exemplo de código HTML e CSS para estilizar uma tabela:
<!DOCTYPE html> <html> <head> <title>Tabela Estilizada</title> <style> .tabela-estilizada { border-collapse: collapse; width: 100%; } .tabela-estilizada th, .tabela-estilizada td { border: 1px solid #dddddd; padding: 8px; text-align: center; } .tabela-estilizada th { background-color: #f2f2f2; } .tabela-estilizada tr:nth-child(even) { background-color: #f2f2f2; } .tabela-estilizada tr:hover { background-color: #ddd; } </style> </head> <body> <table class="tabela-estilizada"> <tr> <th>Nome</th> <th>Idade</th> <th>Profissão</th> </tr> <tr> <td>João</td> <td>25</td> <td>Engenheiro</td> </tr> <tr> <td>Maria</td> <td>30</td> <td>Advogada</td> </tr> <tr> <td>José</td> <td>29</td> <td>Empreendedor</td> </tr </table> </body> </html>
Nesse exemplo, criamos uma tabela estilizada com bordas colapsadas (border-collapse: collapse;
).
largura de 100% (width: 100%;
), células centralizadas (text-align: center;
), cores de fundo alternadas para as linhas pares (background-color: #f2f2f2;
).
Adicionamos uma cor de fundo diferente ao passar o mouse sobre as linhas (background-color: #ddd;
).
As possibilidades de estilização são vastas e podem ser adaptadas de acordo com o design do seu projeto.
Com CSS, você pode criar tabelas mais atraentes, destacar informações importantes e melhorar a legibilidade dos dados apresentados.
Em resumo, estilizar tabelas com CSS permite personalizar a aparência e torná-las mais visualmente agradáveis, destacando as informações importantes.
Pratique a aplicação de estilos CSS em tabelas para aprimorar a apresentação dos dados em suas páginas web. Abaixo tem uma lista das propriedades CSS para você aplicar em suas tabelas.
- border-collapse: Controla a junção das bordas das células da tabela. Os valores possíveis são “collapse” (bordas se fundem) e “separate” (bordas são separadas).
- border-spacing: Define o espaço entre as bordas das células da tabela quando o valor de “border-collapse” é “separate”.
- caption-side: Determina a posição da legenda da tabela. Os valores podem ser “top”, “bottom” ou “inherit”.
- empty-cells: Define se as células vazias devem mostrar ou ocultar bordas. Os valores podem ser “show”, “hide” ou “inherit”.
- table-layout: Controla como a tabela deve ser renderizada. Os valores possíveis são “auto” (largura das colunas é baseada no conteúdo) e “fixed” (largura das colunas é definida explicitamente).
- vertical-align: Alinha verticalmente o conteúdo das células da tabela. Pode receber valores como “top”, “middle”, “bottom”, entre outros.
- text-align: Alinha o texto horizontalmente dentro das células da tabela. Pode receber valores como “left”, “center”, “right” e “justify”.
- background-color: Define a cor de fundo da tabela.
- color: Define a cor do texto dentro da tabela.
- font-size: Define o tamanho da fonte do texto na tabela.
- font-weight: Controla a espessura da fonte, como “bold” para negrito.
- border: Define as bordas das células. Pode ser usado para controlar a espessura, estilo e cor da borda.
- border-radius: Cria bordas arredondadas nas células.
- box-shadow: Adiciona sombras à tabela, criando uma sensação de elevação.
- padding: Define o espaço entre o conteúdo da célula e suas bordas.
- width: Define a largura da tabela.
- height: Define a altura da tabela.
- text-transform: Altera o formato do texto, como “uppercase” para maiúsculas.
- text-decoration: Adiciona decorações ao texto, como “underline” para sublinhado.
- cursor: Define o cursor do mouse quando passa sobre a tabela, como “pointer” para um ponteiro.
Com as bases sólidas estabelecidas em criar tabelas HTML, personalizar seus cabeçalhos e dominar técnicas avançadas de mesclagem, é hora de avançar para os Exercícios do Módulo 1.
Ao combinar suas habilidades recém-adquiridas com a estilização por meio de CSS, você estará pronto para elevar suas criações de tabelas a um novo nível!