Diseñorama » Tutoriales

Usando CSS en tablas

Escrito por Kemie Guaida en 16.05.04

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

---

Comentarios

1. 23 junio 2004, 08:34Javier Cabrera

   Las tablas no son para layout, son para datos solamente.
   

2. 29 junio 2004, 15:07oscar arzola

   Excelente ahora a esperar mas tutoriales :)
   

3. 14 julio 2004, 03:29corsaria

   Muy buen diseño felicidades. Espero sigas aportando tan bueno tutoriales como el de tablas y css. :))
   

4. 25 septiembre 2004, 12:34Dark_Ryoga

   Me encanto tu pagina ! y los tutoriales ! prometo entrar seguido ! sigue asi !! n_n
   

5. 7 octubre 2004, 22:32Jose

   ¿hay alguna forma de sustituir mediante CSS el cellspacing de una tabla?
   

6. 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
   

7. 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.
   
   

8. 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!
   

9. 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
   

10. 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.
    

11. 19 abril 2006, 23:23Nebur Alvarez

    estoy empezando con esto del diseño.. excelente página
    

12. 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/

13. 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”“”“”“””

14. 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

15. 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

16. 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

17. 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

18. 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?

19. 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

20. 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. 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!!

22. 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

23. 6 enero 2008, 17:13Kemie

    deberia de funcionar… tienes algun ejemplo en linea?

24. 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).

25. 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

26. 23 julio 2008, 12:03Oscar

    Va mas allá de que los grandes gurúes tilden a las tablas como diabolicas. Ahora después de muchisimo tiempo las cosas se estan tendiendo a hacer bien y los navegadores aunque haya muchos mas que antes, ahora es como que tienden a estandarizarse ellos mismos y simplifican las roturas de cabeza entre netscape e IE…nosotros montamos todas las web accesibles con los estándares de XHTML y CSS y no tenemos ninguna limitación si necesita CMS ni nada por el estilo…las tablas son unicamente para mostrar datos de tipo matriz y hasta tienen su forma correcta de armarlas accesibles. Una web con tablas es limitarte a que muchas personas con problemas de ceguera y que utilicen programas como el JAWS no puedan ni siquiera entrar.

    El maquetar con tablas es hacer una estructura rígida que no puede variarse con las hojas de estilo…y hoy en la web 2.0 más alla de los temas que tocan de comunidades y esas cosas, su gran cambio fue el de separar los contenidos con la estructura visual, cosa que con las tablas esto no se puede hacer.

    A mi me costo aprenderlo, yo era un ferviente utilizador de tablas para amquetar proyectos, pero de nuevo…reconozco que cuando las cosas se cambian a bien, es eso…para mejorar.

27. 26 agosto 2008, 22:18enlinea777

    los tr:hover funcionan en IE7
    con esto:
    <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

28. 9 septiembre 2008, 00:00roberth-j

    bueno…será cuestión de pornerlo en practica.
    Salu2

29. 31 octubre 2008, 00:47Ariel Tapia

    Aqui va un ejemplo con javascript que funciona en todos los navegadores.
    Cuando copien el codigo recuerden acomodar las comillas y las doble comillas porque esta pagina web las pone de forma incorrecta…

    <style type=“text/css”>
    .afuera{ border:solid #000000 2px; background-color:#FFFFCC; color:#006600; }
    .encima{ border:dashed #CC0000 2px; background-color:#66FFFF; color:#000000; font-weight:bold; }
    </style>
    <div class=“afuera” onmouseover=“this.className=‘encima’;” onmouseout=“this.className=‘afuera’;”>Pasar el mouse sobre este texto</div>

30. 3 noviembre 2008, 21:54Eliana

    Que Buana Ayuda…..!!!! Very Good..!!

31. 2 marzo 2009, 14:21AloMaximo

    Buen material, tenia problemas con el firefox y el explorer con respecto a tablas y css ya que los dos los interpretaba de diferentes maneras era para mi web alomaximo.com

32. 21 marzo 2009, 05:34Carlos Acosta

    excelente material, ya estoy listo para usar css

33. 3 junio 2009, 14:06Miguel

    Hola.
    Cuando copio y pego el código en el constructor html de mi blog aparece el código publicado en Internet, no el resultado. ¿Por qué?

34. 24 agosto 2009, 02:53mdo

    Tengo buenos conocimientos de CSS pero me encuentro con un problema que no sé cómo resolver, justo la última columna de una tabla tiene un nombre compuesto en su class, por ejemplo así: <class=“users money” y como el tr tiene la clase=“users” no puedo con ello. El caso es que no puedo tocar el html. Tiene que quedar intacto. ¿Alguna sugerencia por favor? Muchas gracias desde ya.

35. 27 octubre 2009, 09:43sebastian

    hagan lo que quieran con tablas… luego lo convierten con TABLE2CSS.

    Un software que permite pasar a divs… con CSS puro y nada de <table> por ningun lado. Codigo validado por w3c obviamente!

    Saludos!

36. 16 enero 2010, 02:17Yuri

    Sebastian si tienes razon, si cambias las tablas por css tu pagina sera mucho mejor para todo.

    Saludos

37. 26 enero 2010, 20:14maru

    tengo un pequeño problema haber si alguien me puede ayudar, tengo un htm bocetado todo con imagenes jpg. pero necesito que todo se convierta en css. alguien me sabria ayudar.

    es la primera vez que me toca hacer esto, siempre he hecho paginas web y nunca me ha tocado hacer esto.

    desde ya les agradesco por su tiempo

38. 26 enero 2010, 20:43kemie

    maru, no es tan sencillo como “convertir” en css. Tienes que estructurar tu página y luego darle forma. te recomiendo este tutorial: Diseñorama: Diseña una página con código semántico

39. 4 febrero 2010, 13:09Tony

    Excelente página! hace mucho no venía a visitarla. Maru, yo antes bocetaba las páginas con Corel! ERROR! Jajaja.
    Ahora las boceto en Fireworks, y con esto me ayuda mucho porque capturo el código de color en rgb con Fireworks y creo un registro de colores al costado del jpg con los que voy a usar. Luego avanzo con las medidas en pixeles. Una vez que tenés los códigos de colores y dimensiones de divs, pasás a css.
    Es sólo cuestión de organizarte. Si existiera un programa que pasa de jpg a css por ejemplo, yo no lo usaría, mejor es la precisión y personalización de uno mismo en el código.
    Saludo!

40. 23 abril 2010, 01:37ing

    Como hacer para que cuando le de un click a un tr cambie de color.
    gracias

41. 30 julio 2010, 05:10Yuri

    Hola recomiendo no usar las tablas, reempacenlas por div.

    Ya que los buscadores demoran mas en leer la informacion dentro de la tabla y eso hacer que tu pagina pierda un poco de relevancia en su contenido.

    Saludos

---

¡Comenta!

Nombre:

Email:

URL:

Mensaje: