// ------------------- CÓDIGO JQUERY -------------------
<script type="text/javascript">
$('document').ready(function(){
/* odd (pares)ººººººººººººººººººººººººººººººººº */
/* Color fondo y de texto para las
filas pares (tr:odd) de la tabla */
jQuery('tr:odd').css('background', '#B0C4DE').css('color', '#4682B4');
/* color azul */
/* even (impares) ººººººººººººººººººººººººººººº */
/* Color fondo y de texto para las
filas impares (tr:even) de la tabla */
jQuery('tr:even').css('background', '#ADD8E6').css('color', '#4682B4');
/* color azul */
/* first (primero) ºººººººººººººººººººººººººººº */
/* Color de fondo y de texto para la
primera fila (tr:first) de la tabla */
jQuery('tr:first').css('background', '#20B2AA').css('color', '#FFF');
/* color blanco */
/* last (último) ºººººººººººººººººººººººººººººº */
/* Color de fondo y de texto para la
última fila (tr:last) de la tabla */
jQuery('tr:last').css('background', '#F0FFF0').css('color', '#2F4F4F');
/* color blanco */
/* gt() mayor que ººººººººººººººººººººººººººººº */
/* A partir del TD nº. 2, es decir del
tercer TD de la 2ª fila, cambiao el
color del texto td:gt(indice) */
$('td:gt(2)').css('color', '#FFFAFA'); /* SNOW */
/* A partir del TD nº. 5, es decir del
tercer TD de la 3ª fila, vuelvo a
cambiar el color del texto td:gt(indice) */
$('td:gt(5)').css('color', '#4682B4'); /* STEELBLUE */
/* lt() menor que ººººººººººººººººººººººººººººº */
/* A partir de la segunda TH y hacia atrás
cambio el color fondo de las celdas
td:lt(indice) */
$('th:lt(2)').css('background', '#F5F5F5').css('color', '#4682B4');
/* color azul */
/* A partir de la primera TH y hacia atrás
cambio el fondo y color de las celdas
td:lt(indice) */
$('th:lt(1)').css('background', '#20B2AA').css('color', '#FFF');
/* color azul */
/* head h1, h2, ... ººººººººººººººººººººººººººº */
/* selecciona los encabezados H1, H2, etc
y cambio sus estilos con (:head) */
$('h4:head').css('color', '#FF6347'); /* color tomate */
/* :parent, selecciono 'TR' que es el 'Padre' de 'TD' pie tabla */
$("td:parent").fadeTo(1500, 0.3); // (Duración y Opacidad)
});
</script>
// --------------------- CÓDIGO CSS -----------------------
<style type="text/css">
table {
margin: 0 auto;
background-color: #E6E6FA; /* LAVENDER */
/* Redondear bordes */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border: 4px;
border-radius: 4px;
/* SOMBRA TABLA */
box-shadow: 4px 4px 7px #778899; /* LIGHTSLATEGRAY */
-webkit-box-shadow: 4px 4px 7px #778899; /* Safari, Chrome */
-moz-box-shadow: 4px 4px 7px #778899; /* Firefox y deribados */
filter: shadow(color=#778899, direction=140, strength=4); /* "IE" */
}
table, th, td {
border: 1px solid #999; /* Gris */
padding: 10px;
}
.pieTabla {
text-decoration: underline;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
color: #000; /* BLACK */
background-color: #FAEBD7; /* ANTIQUEWHITE */
}
</style>
