Estilo de tabela CSS
Preenchimento da mesa
Para controlar o espaço entre a borda e o conteúdo de uma tabela, use a
padding
propriedade nos elementos <td> e <th>:
Exemplo
th, td
{
padding: 15px;
text-align: left;
}
Divisores horizontais
Primeiro nome | Último nome | Poupança |
---|---|---|
Pedro | Grifo | $ 100 |
Lois | Grifo | $ 150 |
João | Swanson | $ 300 |
Adicione a border-bottom
propriedade a <th> e <td> para divisores horizontais:
Exemplo
th, td {
border-bottom: 1px solid #ddd;
}
Mesa flutuante
Use o :hover
seletor em <tr> para destacar as linhas da tabela ao passar o mouse:
Primeiro nome | Último nome | Poupança |
---|---|---|
Pedro | Grifo | $ 100 |
Lois | Grifo | $ 150 |
João | Swanson | $ 300 |
Exemplo
tr:hover {background-color: yellow;}
Tabelas listradas
Primeiro nome | Último nome | Poupança |
---|---|---|
Pedro | Grifo | $ 100 |
Lois | Grifo | $ 150 |
João | Swanson | $ 300 |
Para tabelas com listras zebra, use o nth-child()
seletor e adicione a background-color
a todas as linhas da tabela pares (ou ímpares):
Exemplo
tr:nth-child(even) {background-color: #f2f2f2;}
Cor da tabela
O exemplo abaixo especifica a cor de fundo e a cor do texto dos elementos <th>:
Primeiro nome | Último nome | Poupança |
---|---|---|
Pedro | Grifo | $ 100 |
Lois | Grifo | $ 150 |
João | Swanson | $ 300 |
Exemplo
th {
background-color: #04AA6D;
color: white;
}