Al maquetar una página web es necesario, en algunas oportunidades, destacar una informacón para que sobresalga dentro del contenido del documento. Es entonces cuando debemos acudir a las tablas. CSS es, en estos momentos, la tecnología más adecuada para definir los estilos de un documento. Lo que se hace con HTML se puede realizar con CSS, obteniendo varias ventajas de la maquetación con Hojas de Estilo en Cascada. Vamos a realizar un ejercicio en el que crearemos recuadros, utilizando tablas, pero apelando a CSS para aplicarles estilos, y así lograr unos recuadros más vistosos. El ejercicio dispone de dos recuadros con estilos distintos, pero códigos muy similares. Para variar su aspecto, se cambia la declaración de estilos para cada uno. La maquetación con estilos se realiza utilizando etiquetas <DIV> . Primer recuadro El código HTML para esta tabla es el siguiente: <div id=tabla1> Contiene tres etiquetas <div> :
<style type="text/css"> #tabla1{ border: 2px solid #000000; width: 280px; } #cabtab1{ background-color: #088A85; font-weight: bold; color: #ffffff; padding: 2 2 2 2px; } #cuerpotab1{ padding: 4 4 4 4px; background-color: #DF7401; } </style> Cada <DIV> tiene asignado un estilo distinto dependiendo de nuestras necesidades. En este caso estamos asignando:
Segundo recuadro El código HTML de este recuadro es casi idéntico al del primero. Lo único diferente son los identificadores de los <DIV> , con los que asignamos unos estilos distintos al recuadro. <div id=tabla2> El código CSS para definir los estilos es el siguiente: <style type="text/css"> Las etiquetas <div> están asignando estilos así:
Éste es el resultado: |
|
0 comentarios :
Este blog ya cumplió su ciclo, por esta razón, aunque sigue a disposición de los usuarios, no se harán más publicaciones ni se atenderán más consultas. La respuesta a su inquietud puede estar entre los comentarios hechos hasta aquí.
El autor.