Usando CSS en 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. 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; }