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!
