Efecto de cebra a tabla html sencillo
Como lograr el codiciado efecto de cebra en una tabla de html pues es
muy simple solo debes aplicarle una hoja de estilo en cascada CSS y listo
Veamos el código html primero:
<html>
<head>
<link rel="stylesheet"
href=" https://copy.com/cupE2GfCrFvb" />
<title>Efecto de zebra</title>
</head>
<body>
<table id="miTabla">
<tr> <td>Columna
1</td>
<td>Columna
2</td>
</tr>
<tr> <td>Fila 1 columna
1</td>
<td>Fila 2 columna
2</td>
</tr>
<tr> <td>Fila 3
columna1</td>
<td>Fila 4 columna
2</td>
</tr>
<tr> <td>Fila 5 columna 1</td>
<td>Fila 6 columna
2</td>
</tr>
<tr> <td>Fila 7 columna 1</td>
<td>Fila 8 columna
2</td>
</tr>
</table>
</body>
</html>
Y nuestro css para crear el
efecto de cebra, usaremos el id de nuestra tabla el cual es #miTabla (se usa el
“#” debido haremos referencia al id si
tuviéramos que hacer referencia a alguna class seria “.”), veamos como creamos
el efecto de cebra:
tr:nth-child(odd) (es para las
filas impares)
tr:nth-child(even) (es para las
filas pares):
//1.CSS-------------------------------------------à
@charset
"utf-8";
/* CSS Document */
#miTabla
tr:nth-child(odd) {
background-color: #999;
color:;
}
#miTabla
tr:nth-child(even) {
background-color: #CCC;
color:#FFF;
}
Demo (Descargar):
