Tabelas CSS
A aparência de uma tabela HTML pode ser muito melhorada com CSS:
| Companhia | Contato | País |
|---|---|---|
| A caixa de alimentação do Alfred | Maria Anders | Alemanha |
| Supermercado Berglund | Cristina Berglund | Suécia |
| Centro Comercial Montezuma | Francisco Chang | México |
| comércio sério | Roland Mendel | Áustria |
| Comércio de ilhas | Helen Bennett | Reino Unido |
| comida real | Philip Cramer | Alemanha |
| Adegas de Baco Rindo | Yoshi Tannamuri | Canadá |
| Armazéns de Alimentos Reunidos | Giovanni Rovelli | Itália |
Bordas da tabela
Para especificar as bordas da tabela em CSS, use a borderpropriedade.
O exemplo abaixo especifica uma borda preta para os elementos <table>, <th> e <td>:
Exemplo
table, th, td {
border: 1px solid black;
}
Tabela de largura total
A tabela acima pode parecer pequena em alguns casos. Se você precisar de uma tabela que deva abranger toda a tela (largura total), adicione width: 100%ao elemento <table>:
Exemplo
table {
width: 100%;
}
Bordas duplas
Observe que a tabela nos exemplos acima tem bordas duplas. Isso ocorre porque tanto a tabela quanto os elementos <th> e <td> têm bordas separadas.
Para remover bordas duplas, dê uma olhada no exemplo abaixo.
Recolher bordas da tabela
A border-collapsepropriedade define se as bordas da tabela devem ser recolhidas em uma única borda:
Exemplo
table
{
border-collapse: collapse;
}
Se você quiser apenas uma borda ao redor da tabela, especifique apenas a borderpropriedade para <table>:
Exemplo
table
{
border: 1px solid black;
}