STYLE DE TABELA DO HTML5
COMO FAZER UMA TABELA LISTRADA NAS
LINHAS
:nth-child(even) è usado para
colocar cor no fundo das linhas modo alternado.
(odd) é usado para linhas ímpar 1, 3,5, 7...
(even) é
usado para linhas pares 2,4,,6...
<!DOCTYPE html>
<html >
<head> <title> Título da página </titel>
<style>
table {
border-collapse:
collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 10px;
}
tr:nth-child(even) {
background-color:
#D6EEFF;
}
</style>
</hedad>
<body>
<h2> USAR SELETOR (EVEN) OU (ODD)</h2>
<table style="width:100%">
<tr>
<th>Empresa</th>
<th>Contato
</th>
<th>cidade</th>
</tr>
<tr>
<td>João</td>
<td>Francisco</td>
<td>Fortaleza</td>
</tr>
<tr>
<td>Centro
</td>
<td>Francisco
</td>
<td>
Brasil</td>
</tr>
</table>
</body>
</html>
COMO FAZER UMA TABELA LISTRADA NAS COLUNAS
:nth-child(even) è usado para
colocar cor no fundo das colunas modo alternado.
(odd) é usado para colunas ímpar 1, 3,5, 7...
(even) é
usado para colunas pares 2, 4,6...
<!DOCTYPE
html>
<html >
<head> <title> Título da página </titel>
<style>
table, th, td {
border: 1px solid
black;
border-collapse:
collapse;
}
th:nth-child(odd),
td:nth-child(odd) {
background-color:
#D6EEEE;
}
</style>
</hedad>
<body>
<h2> USAR SELETOR (EVEN) OU (ODD)</h2>
<table style="width:100%">
<tr>
<th>Empresa</th>
<th>Contato
</th>
<th>cidade</th>
</tr>
<tr>
<td>João</td>
<td>Francisco</td>
<td>Fortaleza</td>
</tr>
<tr>
<td>Centro
</td>
<td>Francisco </td>
<td>
Brasil</td>
</tr>
</table>
</body>
</html>
OBSERVAÇÃO: :nth-child() VAI COLOCAR EM
DOIS ELEMENTOS TH DO CABEÇALHO TD DA COLUNA.
FAZER LISTRAS TANTO NA HORIZONTAL COM NA
VERTICAL
COR AGORA
RGBA ( )
<!DOCTYPE
html>
<html >
<head> <title> Título da página </titel>
<style>
table, th, td {
border: 1px solid
black;
border-collapse:
collapse;
}
tr:nth-child(even) {
background-color:
rgba(150, 212, 212, 0.4);
}
th:nth-child(even),td:nth-child(even) {
background-color:
rgba(150, 212, 212, 0.4);
}
</style>
</hedad>
<body>
<h2> FAZER
LISTRAS TANTO NA HORIZONTAL COM NA VERTICAL
</h2>
<table style="width:100%">
<tr>
<th>Empresa</th>
<th>Contato
</th>
<th>cidade</th>
</tr>
<tr>
<td>João</td>
<td>Francisco</td>
<td>Fortaleza</td>
</tr>
<tr>
<td>Centro
</td>
<td>Francisco </td>
<td>
Brasil</td>
</tr>
</table>
</body>
</html>
DIVISORES HORIZONTAIS
border-bottom VAI ADICIONAR NO ELEMENTO TR
<!DOCTYPE
html>
<html >
<head> <title> Título da página </titel>
<style>
table {
border-collapse:
collapse;
width: 100%;
}
tr {
border-bottom: 1px solid #dbc;
}
</style>
</hedad>
<body>
<h2> DIVISORES HORIZONTAIS</h2>
<table style="width:100%">
<tr>
<th>Empresa</th>
<th>Contato
</th>
<th>cidade</th>
</tr>
<tr>
<td>João</td>
<td>Francisco</td>
<td>Fortaleza</td>
</tr>
<tr>
<td>Centro
</td>
<td>Francisco </td>
<td>
Brasil</td>
</tr>
</table>
</body>
</html>
MESA
FLUTUANTE
Use o :hover seletor para elemento tr para
destacar as linhas ao passar mouse por cima delas.
<!DOCTYPE
html>
<html >
<head> <title> Título da página </titel>
<style>
table {
border-collapse:
collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px
solid #DDD;
}
tr:hover {background-color: #D6EEEE;}
</style>
</hedad>
<body>
<h2> DIVISORES HORIZONTAIS</h2>
<table style="width:100%">
<tr>
<th>Empresa</th>
<th>Contato
</th>
<th>cidade</th>
</tr>
<tr>
<td>João</td>
<td>Francisco</td>
<td>Fortaleza</td>
</tr>
<tr>
<td>Centro
</td>
<td>Francisco </td>
<td>
Brasil</td>
</tr>
</table>
</body>
</html>