Tabelas com CSS
As tabelas com CSS são uma excelente maneira de apresentar dados de forma organizada em páginas web. No entanto, elas podem parecer monótonas e pouco atraentes sem a devida estilização. Neste post, vamos explorar como usar CSS para tornar suas tabelas mais visualmente agradáveis e fáceis de entender.
Estrutura básica de uma tabela HTML
Antes de estilizar, precisamos de uma tabela básica. Veja um exemplo simples:
<table>
<thead>
<tr>
<th>Nome</th>
<th>Idade</th>
<th>Cidade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Maria</td>
<td>28</td>
<td>São Paulo</td>
</tr>
<tr>
<td>João</td>
<td>34</td>
<td>Rio de Janeiro</td>
</tr>
</tbody>
</table>Estilizando tabelas com CSS
Para dar vida à sua tabela, você pode aplicar várias propriedades CSS. Aqui estão algumas dicas:
Adicionar bordas: Use border para definir bordas em suas células e tabelas.
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}Cores e Fundos: Mude a cor de fundo das células com background-color para destacar cabeçalhos ou linhas específicas.
th {
background-color: #4CAF50;
color: white;
}Efeitos de hover: Torne a tabela interativa usando efeitos de hover nas linhas.
tr:hover {
background-color: #f1f1f1;
}Alinhamento do texto: Utilize text-align para alinhar o conteúdo das células.
td {
text-align: left;
}Exemplo completo
Aqui está um exemplo completo que combina todas as dicas mencionadas:
CSS
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
}
tr:hover {
background-color: #f1f1f1;
}HTML
<table>
<thead>
<tr>
<th>Nome</th>
<th>Idade</th>
<th>Cidade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Maria</td>
<td>28</td>
<td>São Paulo</td>
</tr>
<tr>
<td>João</td>
<td>34</td>
<td>Rio de Janeiro</td>
</tr>
</tbody>
</table>Outro exemplo prático
Código HTML/XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<html xmlns="estilo.css" rel="stylesheet" type="text/css" />
<title>CSS - Dicas</title>
</head>
<body>
<h1>Exemplo de Tabelas></h1>
<table class="ex">
<tr>
<th>Título 01></th>
<th>Título 02></th>
<th>Título 03></th>
</tr>
<tr>
<td>Célula 01></td>
<td>Célula 02></td>
<td>Célula 03></td>
</tr>
</table>
</body>
</html>Código CSS (arquivo estilo.css):
body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
table th
{
text-align: center
text-weight: bold;
}
table.ex { border: 4px dotted #000000;}
table.ex td
{
background: #dcdcdc;
border: 4px solid #ffffff;
}Estilizar tabelas com CSS é uma maneira eficaz de melhorar a apresentação de dados em seu site.
Com um pouco de criatividade e as propriedades CSS certas, suas tabelas podem se tornar não apenas funcionais, mas também visualmente atraentes. Experimente diferentes combinações e veja como isso pode impactar a experiência do usuário em sua página!
Aprenda através de projetos reais e aulas práticas. São 20 cursos completos + cursos bônus. Grupos privados exclusivos, atualizações constantes e lives semanais.
Python, PHP, Java Script, CSS, Node, Angular JS, MySQL, Photoshop, Flutter, AWS, Apache e muito mais!
Link do curso: https://go.hotmart.com/X68198266R
Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits
