Usando CSS en tablas.

por | 16 Julio 2009
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; } tablas.htm <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <link href="tablas.css" rel="stylesheet" type="text/css"> </head> <body> <table width="600" border="0" cellspacing="5" cellpadding="0"> <tr> <td colspan="2"> El Galimatazo (celda3) * </td> </tr> <tr> <td> <p>Esta celda tiene la clase "celda1"</p> <p>.celda1{<br> font: bold 11px/14px Verdana, Geneva, Arial, Helvetica, sans-serif;<br> border:1px dotted 5E93B5;<br> padding: 10px;<br> background-image: url(../imgs/fondo2.gif); <br> background-position: top right;<br> background-repeat: no-repeat; <br> }</p> </td> <td> <p>Esta celda tiene la clase "celda2"</p> <p>.celda2{<br> font: 12px/14px Verdana, Geneva, Arial, Helvetica, sans-serif;<br> border-top: 4px solid #5E93B1;<br> border-right: 1px dotted #416D89;<br> border-left:1px dotted #416D89;<br> border-bottom:none;<br> padding-top:10px;<br> padding-right:3px;<br> padding-left:20px;<br> padding-bottom:12px;<br> background-color:#EEEEEE;<br> }</p> </td> </tr> <tr> <td><p>Esta celda tiene la clase "celda 4"</p> <p>.celda4{<br> width:200px;<br> height:200px;<br> border:1px dotted #DDDDDD;<br> } </p></td> <td>*.celda3{ <br> background-image: url(../imgs/fondo1.gif);<br> background-repeat: repeat-x;<br> font: bold 18px/14px Verdana, Geneva, Arial, Helvetica, sans-serif;<br> color:white;<br> padding:4px;<br> background-color:#5C909A;<br> }</td> </tr> </table> </body> </html> tablas.css body{background-color:#FFFFFF;} .celda1{ font: bold 11px/14px Verdana, Geneva, Arial, Helvetica, sans-serif; border:1px dotted 5E93B5; padding: 10px; background-image: url(../imgs/fondo2.gif); background-position: top right; background-repeat: no-repeat; } .celda2{ font: 12px/14px Verdana, Geneva, Arial, Helvetica, sans-serif; border-top: 4px solid #5E93B1; 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; background-color:#EEEEEE; } .celda3{ background-image: url(../imgs/fondo1.gif); background-repeat: repeat-x; font: bold 18px/14px Verdana, Geneva, Arial, Helvetica, sans-serif; color:white; padding:4px; background-color:#5C909A; } .celda4{ width:200px; height:200px; border:1px dotted #DDDDDD; } Fuente: Webtaller.
Compartir... Email this to someoneShare on LinkedIn0Pin on Pinterest0Share on StumbleUpon0Share on Tumblr0Tweet about this on Twitter