CSS Estilo de Tabela
Preenchimento da tabela
Padding propriedade nos elementos <td> e <th>
Na prática
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid
#ddd;
text-align: left;
}
table {
border-collapse:
collapse;
width: 100%;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<h2>A propriedade padding</h2>
<p>Essa propriedade adiciona espaço entre a borda e o
conteúdo de uma tabela.</p>
<table>
<tr>
<th>Nome</th>
<th>Sobre
nome</th>
<th>Valor a
receber</th>
</tr>
<tr>
<td>Maria
</td>
<td>José</td>
<td>R$100</td>
</tr>
<tr>
<td>João
</td>
<td>Rufino</td>
<td>R$150</td>
</tr>
<tr>
<td>José</td>
<td>Silva</td>
<td>R$300</td>
</tr>
<tr>
<td>José</td>
<td>Silva</td>
<td>R$250</td>
</tr>
</table>
</body>
</html>
Divisores horizontais
border-bottom propriedade a
<th> e <td> para divisores horizontais:
Na prática
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse:
collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px
solid #ddd;
}
</style>
</head>
<body>
<h2>Divisores de mesa com borda</h2>
<p>Adicione a propriedade border-bottom a th e td
para divisores horizontais:</p>
<table>
<tr>
<th>Nome</th>
<th>Sobre
nome</th>
<th>Valor a
receber</th>
</tr>
<tr>
<td>Maria
</td>
<td>José</td>
<td>R$100</td>
</tr>
<tr>
<td>João
</td>
<td>Rufino</td>
<td>R$150</td>
</tr>
<tr>
<td>José</td>
<td>Silva</td>
<td>R$300</td>
</tr>
<tr>
<td>José</td>
<td>Silva</td>
<td>R$250</td>
</tr>
</table>
</body>
</html>
Tabela
flutuante
:hover
seletor em <tr> para destacar as linhas da
tabela ao passar o mouse sobre:
<!DOCTYPE
html>
<html>
<head>
<style>
table
{
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover
{background-color: coral;}
</style>
</head>
<body>
<h2>Tabela
flutuante</h2>
<p>Mova
o mouse sobre as linhas da tabela para ver o efeito.</p>
<table>
<tr>
<th>Nome</th>
<th>Sobre nome</th>
<th>Valor a receber</th>
</tr>
<tr>
<td>Maria </td>
<td>José</td>
<td>R$100</td>
</tr>
<tr>
<td>João </td>
<td>Rufino</td>
<td>R$150</td>
</tr>
<tr>
<td>José</td>
<td>Silva</td>
<td>R$300</td>
</tr>
<tr>
<td>José</td>
<td>Silva</td>
<td>R$250</td>
</tr>
</table>
</body>
</html>
Mesas listradas
nth-child()seletor e
adicione um background-colora todas as linhas pares (ou ímpares) da tabela:
Na prática
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width:
100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {background-color: #f2f2f2;}
</style>
</head>
<body>
<h2>mesa listrada</h2>
<p>Para tabelas zebradas, use o seletor
nth-child() e adicione uma cor de fundo a todas as linhas pares (ou ímpares) da
tabela</p>
<table>
<tr>
<th>Nome</th>
<th>Sobre nome</th>
<th>Valor a receber</th>
</tr>
<tr>
<td>Maria </td>
<td>José</td>
<td>R$100</td>
</tr>
<tr>
<td>João </td>
<td>Rufino</td>
<td>R$150</td>
</tr>
<tr>
<td>José</td>
<td>Silva</td>
<td>R$300</td>
</tr>
<tr>
<td>José</td>
<td>Silva</td>
<td>R$250</td>
</tr>
</table>
</body>
</html><!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width:
100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {background-color: #f2f2f2;}
</style>
</head>
<body>
<h2>mesa listrada</h2>
<p>Para tabelas zebradas, use o seletor
nth-child() e adicione uma cor de fundo a todas as linhas pares (ou ímpares) da
tabela</p>
<table>
<tr>
<th>Nome</th>
<th>Sobrenome</th>
<th>Valor a receber</th>
</tr>
<tr>
<td>Maria </td>
<td>José</td>
<td>R$100</td>
</tr>
<tr>
<td>João </td>
<td>Rufino</td>
<td>R$150</td>
</tr>
<tr>
<td>José</td>
<td>Silva</td>
<td>R$300</td>
</tr>
<tr>
<td>José</td>
<td>Silva</td>
<td>R$250</td>
</tr>
</table>
</body>
</html>
Cor da Tabela
especifica a cor de fundo e a cor do texto dos
elementos <th>:
Na pratica
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width:
100%;
}
th, td {
text-align:
left;
padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2}
th {
background-color: #04AA6D;
color:
white;
}
</style>
</head>
<body>
<h2>Cabeçalho de tabela
colorido</h2>
<table>
<tr>
<th>Nome</th>
<th>Sobrenome</th>
<th>Valor a receber</th>
</tr>
<tr>
<td>Maria </td>
<td>José</td>
<td>R$100</td>
</tr>
<tr>
<td>João </td>
<td>Rufino</td>
<td>R$150</td>
</tr>
<tr>
<td>José</td>
<td>Silva</td>
<td>R$300</td>
</tr>
<tr>
<td>José</td>
<td>Silva</td>
<td>R$250</td>
</tr>
</table>
</body>
</html>
