En las hojas de estilo podemos definir diferentes formatos para filas pares e impares, es una propiedad general que se puede aplicar a sucesiones de elementos, pero donde más se suele usar es en tablas. Sobre todo en tablas grandes para distinguir mejor una fila de otra asignándoles distintos colores.
Por ejemplo, en la siguiente hoja de estilo hemos colocado este código para dar un color a las filas impares (odd) y otro a las pares (even) tbody tr:nth-child(even) { background-color: #eee; } tbody tr:nth-child(odd) { background-color:#fadddd; }.
table {
padding: 20px;
border: 1px solid black;
border-collapse: collapse;
text-align: center;
margin-left: 20px
}
td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
padding: 3px;
}
thead {
font-weight: bold;
}
tbody tr:nth-child(even) {
background-color: #eee;
}
tbody tr:nth-child(odd) {
background-color:#fadddd;
}
tfoot {
background-color:#f4fdcb;
}
Obtenemos esta tabla:
Ventas coches | ||||||
1 trimestre | 2 trimestre | 3 trimestre | ||||
Nacionales | Importados | Nacionales | Importados | Nacionales | Importados | |
Año 2014 | 341 | 561 | 234 | 129 | 340 | 261 |
Año 2015 | 341 | 561 | 234 | 129 | 340 | 261 |
Año 2016 | 341 | 561 | 234 | 129 | 340 | 261 |
Año 2017 | 741 | 263 | 721 | 841 | 590 | 251 |
Total | 1082 | 824 | 955 | 970 | 930 | 512 |
Síguenos en: Facebook , G+ Sobre aulaClic Política de Cookies
© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.