Estilos para tablas (para descargar)

griseldaremedi — Thu, 15 Apr 2010 05:54:54 +0000

Cuando desarrollamos una aplicación y una vez que ya tenemos solucionado el tema de la funcionalidad nos queda hacernos cargo del diseño de la interfaz. Esta bueno ponerle empeño, para que nuestro ocasional usuario disfrute navegando por nuestro archi mega maravilloso sitio o, utilizando las bondades de nuestra nunca bien ponderada aplicación web

Una buena opción es recurrir a las css que se publican y se pueden descargar. Esta galería tiene diferentes opciones, seguro alguna de ellas se adapta a tus necesidades. Puedes ver la apariencia de cada uno de los estilos haciendo click en el link del nombre del diseño y la misma tabla que contiene la lista tomara el estilo elegido.

Una vez seleccionado el diseño que más te guste, puedes hacer click en dowload para bajar el código usado para lograrlo. Por ejemplo si elegimos REDandBLACK; haciendo click en download obtendremos:

table {
	width: 650px;
	border:1px solid #000000;
	border-spacing: 0px; }
table a, table, tbody, tfoot, tr, th, td {
	font-family: Arial, Helvetica, sans-serif;
}
table caption {
	font-size: 1.8em;
	text-align: left;
	text-indent: 100px;
	background: url(images/bg_caption.gif) left top;
	height: 40px;
	color: #FFFFFF;
	border:1px solid #000000; }
thead th {
	background: url(images/bg_th.gif) left;
	height: 21px;
	color: #FFFFFF;
	font-size: 0.8em;
	font-family: Arial;
	font-weight: bold;
	padding: 0px 7px;
	margin: 20px 0px 0px;
	text-align: left; }
tbody tr {	background: #ffffff; }
tbody tr.odd {	background: #f0f0f0; }
tbody th {
	background: url(images/arrow_white.gif) left center no-repeat;
	background-position: 5px;
	padding-left: 40px !important; }
tbody tr.odd th {
	background: url(images/arrow_grey.gif) left center no-repeat;
	background-position: 5px;
	padding-left: 40px !important; }
tbody th, tbody td {
	font-size: 0.8em;
	line-height: 1.4em;
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	padding: 10px 7px;
	border-bottom: 1px solid #800000;
	text-align: left; }
tbody a {
	color: #000000;
	font-weight: bold;
	text-decoration: none; }
tbody a:hover {
	color: #ffffff;
	text-decoration: underline; }
tbody tr:hover th {
	background: #800000 url(images/arrow_red.gif) left center no-repeat;
	background-position: 5px;
	color: #ffffff; }
tbody tr.odd:hover th {
	background: #000000 url(images/arrow_black.gif) left center no-repeat;
	background-position: 5px;
	color: #ffffff; }
tbody tr:hover th a, tr.odd:hover th a	{
		 color: #ffffff; }
tbody tr:hover td, tr:hover td a, tr.odd:hover td, tr.odd:hover td a {
	background: #800000;
	color: #ffffff;	 }
tbody tr.odd:hover td, tr.odd:hover td a{
	background: #000000;
	color: #ffffff;	 }
tfoot th, tfoot td {
	background: #ffffff url(images/bg_footer.gif) repeat-x bottom;
	font-size: 0.8em;
	color: #ffffff;
	height: 21px;
	}

Como siguiente paso deberíamos guardar este código en un archivo .css y nombrarlo por ejemplo: styleTables.css, subirlo al servidor y no olvidemos añadir la referencia al mismo en el html


		
		Titulo de la pagina

Pero… siempre hay un pero, si utilizamos esta solución tal como está nos damos con que todas las tablas que mostremos tomaran este estilo y no solamente aquellas que queríamos. La buena noticia es que la solución es muy simple, haremos primero pequeños cambios en las css de manera tal de definir el estilo como una clase. Luego esta clase sólo la usaremos en los casos en la que lo necesitemos y nada más.

El código quedaría como el que sigue:

.table {
       width: 650px;
       border:1px solid #000000;
       border-spacing: 0px; }

.table a, .table, .table tbody, .table tfoot, .table tr, .table th, .table td {
       font-family: Arial, Helvetica, sans-serif;
}

.table caption {
       font-size: 1.8em;
       text-align: left;
       text-indent: 100px;
       background: url(img/rojo.jpg) left top;
       height: 40px;
       color: #FFFFFF;
       border:1px solid #000000; }

.table thead th {
       background: url(img/negro.png) left;
       height: 21px;
       color: #FFFFFF;
       font-size: 0.8em;
       font-family: Arial;
       font-weight: bold;
       padding: 0px 7px;
       margin: 20px 0px 0px;
       text-align: left; }

.table tbody tr {        background: #ffffff; }

.table tbody tr.odd {        background: #f0f0f0; }

.table tbody th {
       background: url(images/arrow_white.gif) left center no-repeat;
       background-position: 5px;
       padding-left: 40px !important; }

.table tbody tr.odd th {
       background: url(images/arrow_grey.gif) left center no-repeat;
       background-position: 5px;
       padding-left: 40px !important; }

tbody th, .table tbody td {
       font-size: 0.8em;
       line-height: 1.4em;
       font-family: Arial, Helvetica, sans-serif;
       color: #000000;
       padding: 10px 7px;
       border-bottom: 1px solid #800000;
       text-align: left; }

.table tbody a {
       color: #000000;
       font-weight: bold;
       text-decoration: none; }

.table tbody a:hover {
       color: #ffffff;
       text-decoration: underline; }

.table tbody tr:hover th {
       background: #800000 url(images/arrow_red.gif) left center no-repeat;
       background-position: 5px;
       color: #ffffff; }

.table tbody tr.odd:hover th {
       background: #000000 url(images/arrow_black.gif) left center no-repeat;
       background-position: 5px;
       color: #ffffff; }

.table tbody tr:hover th a, .table tr.odd:hover th a        {
                color: #ffffff; }

.table tbody tr:hover td, .table tr:hover td a, .table tr.odd:hover td, .table tr.odd:hover td a {
       background: #800000;
       color: #ffffff;         }

.table tbody tr.odd:hover td, .table tr.odd:hover td a{
       background: #000000;
       color: #ffffff;         }

.table tfoot th, .table tfoot td {
       background: #ffffff url(images/bg_footer.gif) repeat-x bottom;
       font-size: 0.8em;
       color: #ffffff;
       height: 21px;
       }

Ahora solo restaría hacer referencia a la clase en la tabla que queremos que tome el estilo:

Y con eso terminamos, mientras preparaba este post escuchaba este tema, espero que a ustedes también les guste :

:-*

Hola Mundo!

griseldaremedi — Fri, 29 Feb 2008 00:41:12 +0000

Hola a todos!! gracias por visitar este blog.

Oficinas
Contenido

Weblog de Griselda Remedi

Estilos para tablas (para descargar)

Hola Mundo!