Tabelas em CSS
Para aplicar estilos a tabelas com CSS, utilize as seguintes propriedades: cor da tabela, bordas colapsadas, largura e altura da tabela, alinhamento do texto, padding. Veja os exemplos.
Várias propriedades CSS são amplamente utilizadas para aplicar estilo às tabelas HTML. Cada uma é descrita em baixo.
Neste capítulo, vamos abordar como aplicar estilo às tabelas, incluindo a alteração das cores dos cabeçalhos e das linhas.
Propriedades para estilização de tabelas
Eis as propriedades CSS utilizadas para aplicar estilo a uma tabela. As propriedades background-color e color definem, respetivamente, as cores de fundo e do texto. A propriedade border-collapse colapsa as bordas da tabela. A propriedade text-align define o alinhamento horizontal do texto. Além disso, pode utilizar height, width e padding para ajustes de layout.
Exemplo de estilização de uma tabela:
Exemplo de estilização de tabelas HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
thead {
background-color: #1c87c9;
color: #ffffff;
}
th {
text-align: center;
height: 50px;
}
tbody tr:nth-child(odd) {
background: #ffffff;
}
tbody tr:nth-child(even) {
background: #f4f4f4;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
</tbody>
</table>
</body>
</html>Resultado
Vamos explicar o código acima.
Como pode ver, a nossa tabela tem duas secções principais: a secção <thead> para os cabeçalhos e a secção <tbody> para as linhas de dados. A tabela utiliza bordas pretas, aplicadas através da propriedade border. Pode utilizar a cor e o estilo de borda que preferir.
Cor da tabela
Como pode ver, a parte <thead> da nossa tabela é azul e todo o texto está em branco. Para o fundo azul, utilizamos a propriedade background-color e, para o texto branco, a propriedade color. Os restantes textos estão escritos a preto.
Bordas colapsadas
A propriedade border-collapse especifica se as bordas de uma tabela são colapsadas numa única borda ou se ficam separadas.
Largura e altura da tabela
A tabela também tem as propriedades width e height. Como pode ver, utilizamos estas propriedades no nosso estilo. Utilizamos a propriedade width para toda a tabela e a propriedade height para os cabeçalhos. Podemos utilizar estas propriedades com pixels e percentagens.
Alinhamento do texto da tabela
Agora, sobre o alinhamento do texto da tabela. Como sabe, anteriormente utilizámos a propriedade text-align para a posição do texto. No nosso exemplo, como pode ver, utilizamos a propriedade text-align para o cabeçalho. Para isso, utilizamos "text-align: center". Pode ler o capítulo anterior para saber como utilizá-la.
Padding da tabela
Para controlar o espaço entre a borda e o conteúdo de uma tabela, utilize a propriedade padding nos elementos <td> e <th>:
Padding das tabelas HTML
td, th {
padding: 15px;
}Alinhamento horizontal com a propriedade text-align
Com a ajuda da propriedade CSS text-align, pode definir o alinhamento horizontal do conteúdo em <th> ou <td>.
Por predefinição, o conteúdo dos elementos <td> está alinhado à esquerda e o conteúdo dos elementos <th> está alinhado ao centro. No exemplo abaixo, o conteúdo dos elementos <th> e <td> está alinhado à direita:
Exemplo de alinhamento à direita do conteúdo dos elementos <th> e <td>:
Exemplo de alinhamento à direita do conteúdo dos elementos <th> e <td>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table,
td,
th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: right;
}
</style>
</head>
<body>
<h2>Horizontal alignment example</h2>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Money</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sherlock</td>
<td>Holmes</td>
<td>$200</td>
</tr>
<tr>
<td>John</td>
<td>Watson</td>
<td>$250</td>
</tr>
<tr>
<td>Mary</td>
<td>Whatson</td>
<td>$500</td>
</tr>
</tbody>
</table>
</body>
</html>Alinhamento vertical com a propriedade vertical-align
Utilizando a propriedade CSS vertical-align, pode definir o alinhamento vertical do conteúdo em <th> ou <td>.
Por predefinição, o conteúdo dos elementos <th> e <td> está alinhado verticalmente ao centro.
No exemplo abaixo, o conteúdo dos elementos <td> está alinhado verticalmente em baixo:
Exemplo de alinhamento vertical em baixo do conteúdo dos elementos <td>:
<!DOCTYPE html>
<html>
<head>
<style>
table,
td,
th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
td {
height: 50px;
vertical-align: bottom;
text-align: right;
padding-right: 10px;
}
</style>
</head>
<body>
<h2>Vertical alignment example</h2>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Money</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sherlock</td>
<td>Holmes</td>
<td>$300</td>
</tr>
<tr>
<td>John</td>
<td>Watson</td>
<td>$250</td>
</tr>
<tr>
<td>Mary</td>
<td>Watson</td>
<td>$500</td>
</tr>
</tbody>
</table>
</body>
</html>Divisores horizontais
Ao adicionar a propriedade CSS border-bottom aos elementos <td> e <th>, criará divisores horizontais.
Exemplo de criação de divisores horizontais:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #cccccc;
}
</style>
</head>
<body>
<h2>Horizontal dividers example</h2>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Money</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sherlock</td>
<td>Holmes</td>
<td>$200</td>
</tr>
<tr>
<td>John</td>
<td>Watson</td>
<td>$350</td>
</tr>
<tr>
<td>Mary</td>
<td>Watson</td>
<td>$500</td>
</tr>
</tbody>
</table>
</body>
</html>Tabelas com efeito hover
Ao utilizar o seletor CSS :hover no elemento <tr>, tornará a tabela sensível ao passar do rato.
Exemplo de criação de uma tabela com efeito hover:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
tr {
background-color: #f5f5f5;
}
th,
td {
padding: 15px;
text-align: left;
border-bottom: 1px solid #ccc;
}
tr:hover {
background-color: #cdcdcd;
}
</style>
</head>
<body>
<h2>Hoverable table example</h2>
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Money</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sherlock</td>
<td>Holmes</td>
<td>$200</td>
</tr>
<tr>
<td>John</td>
<td>Watson</td>
<td>$350</td>
</tr>
<tr>
<td>Mary</td>
<td>Watson</td>
<td>$500</td>
</tr>
</tbody>
</table>
</body>
</html>Tabela às riscas (zebra)
Utilizando o seletor nth-child() e adicionando a propriedade CSS background-color às linhas ímpares (ou pares) da tabela, pode criar uma tabela às riscas.
Exemplo de criação de uma tabela às riscas:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: left;
padding: 10px;
}
tr:nth-child(even) {
background-color: #6eeccf;
}
tr:nth-child(odd) {
background-color: #2d7f88;
}
</style>
</head>
<body>
<h2>Striped table example</h2>
<table>
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sherlock</td>
<td>Holmes</td>
<td>$250</td>
</tr>
<tr>
<td>John</td>
<td>Watson</td>
<td>$350</td>
</tr>
<tr>
<td>Mary</td>
<td>Watson</td>
<td>$500</td>
</tr>
</tbody>
</table>
</body>
</html>Tabelas responsivas
Para tornar uma tabela responsiva, envolva-a num elemento contentor e aplique overflow-x: auto a esse contentor.
Exemplo de criação de uma tabela responsiva:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
overflow-x: auto;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: left;
padding: 8px 5px;
}
tr:nth-child(even) {
background-color: #6eeccf;
}
tr:nth-child(odd) {
background-color: #2d7f88;
}
</style>
</head>
<body>
<h2>Responsive table example</h2>
<div>
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
<th>Money</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sherlock</td>
<td>Holmes</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
<td>$150</td>
</tr>
<tr>
<td>John</td>
<td>Watson</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
<td>$350</td>
</tr>
<tr>
<td>Mary</td>
<td>Watson</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
<td>$500</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>