Diseño web
jul 16, 2009
Grupo ES
Comentarios desactivados

Usando CSS en tablas.

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.

Cerrado a comentarios.