Usando CSS en tablas

Escrito por Kemie Guaida en 16.05.04

Muchos gurus de los estándares hacen parecer el uso de tablas como cosa del demonio. Mientras que lo mejor es separar la estructura del contenido y utilizar CSS exclusivamente, para muchos diseñadores los layouts con tablas son una realidad y una necesidad práctica. Podemos aprovechar la versatilidad de CSS para nuestras páginas aun cuando usemos tablas.

Las hojas de estilo nos dan un control mucho más preciso sobre nuestras tablas y los elementos que contienen, y si utilizamos un archivo de CSS externo, nos permite hacer cambios a todo un sitio con solo alterar unas lineas, sin necesidad de cambiar cada página. En este tutorial reviso algunas de las aplicaciones más prácticas y comunes a un layout hecho con tablas.

Tipografía

Un ejemplo es la tipografía. Si utilizamos las etiquetas<font>, debemos de definir la fuente para cada bloque de texto. Si utlilizamos CSS podemos definir un estilo tipográfico para toda una tabla o una celda, y todo su contenido automaticamente tomará ese estilo. por ejemplo, definimos en nuestro archivo CSS:

.celda1{
	font: bold 11px/14px Verdana, Geneva, Arial, Helvetica, sans-serif;
}

Todas las celdas con clase "celda1" tendrán la misma tipografía, sin tener que definirla cada vez. Esto es especialmente útil cuando los textos van a ser editados más tarde por el cliente. Podemos estar seguros que no terminarán en Times New Roman a 18 pixeles, arruinando nuestro diseño.

Tamaños

Podemos definir tanto los altos como los anchos de la celda con CSS,dándonos control preciso, de esta manera:

.celda4{
 	width:200px;
 	height:200px;
 }

Si el cliente decide mañana que la celda del menú debe de ser más alta, podemos hacer los ajustes en el archivo de css y automáticamente todas nuestras páginas se cambiarán

Bordes y Padding

Una enorme ventaja que nos da CSS en tablas es la capacidad de aplicar no solo distintos márgenes y bordes a cada celda, sino a cada lado de cada celda. Por ejemplo:

.celda1{
	border:1px dotted 5E93B5;
	padding: 10px;
}
.celda2{
	border-top: 2px solid 5E93B;
	border-right: 1px dotted #416D89;
	border-left:1px dotted #416D89;
	border-bottom:none;
	padding-top:10px;
	padding-right:3px;
	padding-left:20px;
	padding-bottom:12px;
}

Fondos

Podemos especificar muchas más propiedades para las imágenes de fondo usando CSS, por ejemplo:

repeat: podemos tener una imagen que se repita solo horizontalmente, solo verticalmente, hacia ambos lados, o que no se repita.

position: podemos especificar que una imagen de fondo se alinee a cualquier borde de nuestra celda o tabla.

attachment: nuestra imagen puede desplazarse o quedar fija cuando hagamos scroll a la pagina.

También podemos definir colores de fondo para nuestras celdas.

Ejemplos:

.celda3{
	background-image: url(../imgs/fondo1.gif);
	background-repeat: repeat-x;
}
.celda1{
	background-image: url(../imgs/fondo2.gif);
	background-position: top right;
	background-repeat: no-repeat; }
.celda2{
	background-color:#EEEEEE;
}

Puedes ver todas las propiedades que hemos visto en este ejemplo(no es ninguna belleza, pero espero ayude a entender las propiedades). Puedes ver los estilos aquí.Por supuesto que existen muchas otras propiedades que se pueden aplicar a las tablas, es cuestion de explorar!

Enlaces Relacionados

CSS Table Design: Tutorial paso a paso .
XHTML:Using CSS to style tables

Comentarios

23 junio 2004, 08:34Javier Cabrera
Las tablas no son para layout, son para datos solamente.
29 junio 2004, 15:07oscar arzola
Excelente ahora a esperar mas tutoriales :)
14 julio 2004, 03:29corsaria
Muy buen diseño felicidades. Espero sigas aportando tan bueno tutoriales como el de tablas y css. :))
25 septiembre 2004, 12:34Dark_Ryoga
Me encanto tu pagina ! y los tutoriales ! prometo entrar seguido ! sigue asi !! n_n
7 octubre 2004, 22:32Jose
¿hay alguna forma de sustituir mediante CSS el cellspacing de una tabla?
10 febrero 2005, 17:39Marco
Creo que deberias leerte otra vez lo que dice los estandares web sobre las tablas.
Asi que estoy de acuerdo con Javier Cabrera
2 marzo 2005, 07:37DrSlump
Marco, ni tan siquiera la recomendación del XHTML 1.1 especifica que las tablas no se puedan usar para layout. Conozco bastante bien todas las recomendaciones de la W3C respecto al HTML y que yo sepa nunca se ha dicho que las tablas no puedan usarse para crear layouts. Otra cosa es que sea realmente mejor usar divs, ya que queda un markup más limpio y es más facil retocarlo mediante CSS.

Vamos que semanticamente usar tablas es correcto, por lo menos es tan correcto como usar divs.

De todas formas con CSS3 y su soporte especifico para columnas ya no habrá escusa para usar tablas pero lamentablemente todabía falta bastante hasta que CSS3 sea una realidad.

ciao.
10 junio 2005, 23:18Lorena
Hola Kemie! fijate que el link “CSS Table Design: Tutorial paso a paso” no está funcionando más (para que lo corrijas).
Éxitos!
25 enero 2006, 15:22HARTUM
para controlar el cellspacing utiliza

-border-collapse:collapse

me parece que es nu detalle que deberias incluir en el articulo
27 marzo 2006, 08:36Kelvin
Me gusto mucho la creatividad en este formulario y me gustaria mucho aprender como porgramar uno en este estilo ya sea pagando o como sea posible! para mi paguina web.
19 abril 2006, 23:23Nebur Alvarez
estoy empezando con esto del diseño.. excelente página
27 mayo 2006, 16:14Lozbo

La razón principal para evitar tablas en el diseño de un layout es la accesibilidad. Usuarios con cierta discapacidad física (débiles visuales, ciegos) o de técnica (hardware o software obsoleto) tengan acceso a la información tal cual es.

Por ejemplo, una persona ciega usando un lector de pantalla (como JAWS, que “leen” -literalmente, directamente del código fuente html el contenido) encuentra mucho más lógico el contenido ordenado de forma semánticamente correcta, que ir leyendo de td en td, que se ordena horizontalmente por columna.

Pero en fin, como dicen Marco, Javier Cabrera y Dr. Slump, las tablas siguen usándose para contenido tabular, es decir, datos que necesariamente deban estar en una tabla, como una base de datos de cualquier tipo. Pero esto no significa que no podamos darle estilo… les dejo este magnífico link (el css zen garden de datos tabulares):

http://icant.co.uk/csstablegallery/
25 julio 2006, 18:20KiKe

Puede que con las tablas limitas el acceso a ciertas personas pero con las divs limitas a muchas mas, por lo menos yo he visto muchisimas paginas con div que en un navegador se ven totalmente estupendas pero con otro… s/c
entonces entre usar div que es mas “profesional” segun “expertos” y usar las clasicas tablas, pues prefiero usar tablas pero que la pagina se vea BIEN no como la de esos “”“”“”“”“expertos”“”“”“””
26 julio 2006, 17:15Gregorio

Si se usan bien los css, se puede lograr el mismo resultado para todos los navegadores.

Las tablas, para layout, están expresamente desaconsejadas por el W3C

Yo estoy trabajando el el sitio de la municipalidad de Rosario, Argentina
www.rosario.gov.ar

Ahora vamos a pasarlo a DIVS… ya hice la Agenda ( está el link en el top ) todo con divs + ccs + semantic markup
25 agosto 2006, 10:35MCalons

Hola a todos! Hace años que programo y diseño y si bien nunca hice mucho caso a los standares si es cierto que conviene estar al tanto de ello sobre todo pensando en usabilidad y accesibilidad.

Los divs y trabajar con css está muy bien, el problema es tener que trabajar con páginas dinámicas con asp y php, muchos datos, muchos bucles, condiciones, etc, etc donde resulta más práctico, al menos para mí , trabajar con tablas que no con capas y todos los modelos de CMS que hay en el mercado usan tablas no divs.

Es decir, que dependiendo de tus necesidades te interesará capas o tablas, personalmente prefiero trabajar con tablas.

De todas formas, segun avanza la web, ahora web 2.0 y CSS3 las modas y usos cambian segun también los navegadores y todo eso, años atras teniamos que trabajar con DHTML con unas maravillosas apis de Dan Steinman y había que hacer las webs para IExplorer y Netscape, y ahora está de modo ej AJAX, por lo que mi recomendación principal es que trabajeis con lo que os encontreis cómodos y pensando que lo pueda ver el mayor número de personas (accesibilidad, usabilidad y todo eso para cuando diseñeis portales, comunidades, etc, para paginas personales no es necesario complicarse mucho la vida)

Saludosy y felicidades por la web, sencilla, clara y de ayuda.

Buen trabajo

MCalons
10 octubre 2006, 17:42Vladimir

hola a todo, estoy haciendo una pagina para mi Universida y necesito paginas de css donde pueda trabajar tablas dinamicas y imagenes variadas…gracias…cualquier ayuda, se las agradecere
28 octubre 2006, 13:55rIL

Los tr:hover son muy interesantes, una pena que no funcionen con Internet Explorer. habrá que echar mano del dom : )
Salu2
8 noviembre 2006, 21:18Diego

Que hay de las imagenes de fondo con CSS en Firefox e IE7 por ejemplo?
Lo use en un sitio sobre una tabla y esos exploradores me lo descuartizan…
Quizas sea fruto de mi ignorancia… alguien tiene alguna recomendacion al respecto?
15 marzo 2007, 16:56diego

queria saber xq usan asi:
font:12px/14px Arial, Helvetica, sans-serif;
para declarar la font: osea xq 2 medidas:
12px/14px

gracias
27 marzo 2007, 19:05Omar

Que es lo que nesesito para que cuando pase el raton por encima de la celda cambie de color el fondo?
21 octubre 2007, 00:59final2.0

No se puede esperar siempre hacer layouts con tablas ya que como dicen arriba es bastante inaccesible además de que el código suele ser muy difícil de adaptar y de entender haciendo futuras actualizaciones mas difíciles (sobre todo si te gusta el blog de notas ^^) yo creo que para el layout lo mejor es usar css ya que es mas facil de mantener y personalizar además si te encuentras con algún explorador de antaño que no las soporte el contenido sigue siendo accesible y usar tablas exclusivamente para mostrar datos y porque no uno que otro formulario ^^ bueno esa es mi opinión, aun así bastante bueno el tutorial ^^ se puede aplicar a muchas cosas ^^ y el blog me gusto bastante ^^.

Saludos!

PD. Omar para cambiar el color de fondo cuando pases el mouse encima de una celda utiliza el siguiente estilo

.celda1:hover {
background-color: red;/*o cualquier color*/
}

Nada mas cuidado que esto no funciona en IE6 ya que solo los vínculos admiten la pseudo clase hover.

Saludos!!
4 enero 2008, 20:51Juan Carlos

Aplica muy bien lo del fondo de una tabla con una imagen (.celda3{
background-image: url(../imgs/fondo1.gif);
background-repeat: repeat-x;
}
), pero no funciona en Firefox, solo IE
6 enero 2008, 17:13Kemie

deberia de funcionar… tienes algun ejemplo en linea?
24 marzo 2008, 19:05Julio VM

Hola que tal, me surguio una duda, alguien sabe como hacer para que el fondo de la primera fila sea diferente a las otras filas siguientes(claro utilizando css).
26 marzo 2008, 20:30Moises

Hola quiero hacer un estilo a una tabla en especifico y asus respectivas columnas y renglones. como le puedo hacer?

si utilizo
table, td, tr { }

lo pone a toas las tablas que existen en la pagina. Por ejemplo yo quisierea ponerle a este estilo un nombre para poder asignarselo a una tabla nadamas.

como se le hace?

Gracias y saludos