Deshazte de las tablas y simplifica el diseño con CSS
Deshazte de las tablas
Muchos desarrolladores de HTML usan tablas para crear sus diseños de página, pero el método preferido es usar hojas de estilo en cascada (CSS). Sigue este sencillo ejemplo para aprender CSS.
Las tablas HTML son las favoritas de muchos diseñadores web, pero el propósito principal de estas tablas es presentar datos en forma tabular (en un formato similar a Excel para facilitar la lectura). Los diseñadores se dieron cuenta rápidamente de que era difícil controlar la ubicación de los datos en las páginas HTML, y las tablas proporcionaron la respuesta. Las hojas de estilo en cascada (CSS) ofrecen otra opción. Las hojas de estilo contienen definiciones de cómo se debe representar el contenido en la página. La mejor forma de abordar este tema es convertir una página HTML que utilice un diseño de tabla en una que utilice una hoja de estilos. Empecemos.
disposición de la mesa
Las tablas permiten que los elementos se distribuyan según columnas y filas en una página web. La figura A muestra el punto de partida de la transición para este artículo. Es una página simple que utiliza tablas para mostrar imágenes, mensajes de texto y enlaces de correo electrónico en la pantalla. La imagen ocupa dos líneas, con texto y enlaces de correo electrónico a su lado.
| Figura A |
 |
| Diseño de página web simple usando tablas HTML |
Aquí está el HTML completo para la Figura A:
«http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
Esto es solo una prueba…
 |
Desarrollé esta página de muestra para demostrar un diseño simple usando CSS, cambiando del antiguo método de usar tablas HTML. |
| ¡Envíame un correo electrónico! |
HTML es bastante básico, pero señalaré algunos detalles. La primera línea especifica el tipo de documento, que se ajusta al estándar XHTML. La etiqueta principal contiene un título estándar y etiquetas meta para indicar el autor y la información relacionada. El elemento de fuente determina la fuente (Arial) que se usará en la página. Se incluye una etiqueta de fuente, por lo que solo se utiliza una fuente. Una tabla es el elemento principal de una página; establece las filas y columnas utilizadas para diseñar el contenido del sitio. Tenga en cuenta que la celda que contiene la imagen ocupa dos filas, por lo que el texto aparece a la derecha.
La tabla funciona bien con el diseño básico y se carga en el navegador sin ningún problema. Sin embargo, surgen problemas cuando es necesario realizar cambios en la página. Por ejemplo, es posible que deba aplicar un formato diferente a las direcciones de correo electrónico y los títulos de las páginas. Esto requiere editar la página HTML y puede volverse engorroso. El uso de CSS reduce en gran medida estos problemas.
Usar hojas de estilo para el diseño
CSS permite separar la presentación y el formato de los datos. Es decir, los datos que se presentarán al usuario están contenidos en la página HTML. El formato se mantiene por separado como una hoja de estilo (CSS). Rediseñemos la página de la Figura A usando una hoja de estilo. El enfoque principal de este esfuerzo de diseño fue un diseño con imágenes colocadas a la izquierda y texto fluyendo a la derecha. Además, el espacio entre el texto y las imágenes debe ser adecuado.
Las hojas de estilo facilitan la aplicación de fuentes, espaciado y otras propiedades a elementos individuales de una página. Las hojas de estilo pueden almacenarse en un archivo separado (con una extensión de archivo .css), incluirse en la sección de encabezado de un documento HTML o incluirse en los elementos HTML correspondientes. En este ejemplo, el CSS se crea en el encabezado de la página y se hace referencia a lo largo del documento. Aquí está el HTML modificado:
Esto es solo una prueba…
¡Envíame un correo electrónico!
La primera diferencia obvia es la presencia de elementos de estilo en el encabezado del documento HTML. La sección Estilos le permite establecer reglas de formato para aplicar a elementos individuales en su documento. Hay dos formas de manejar el formato:
-
- Los nombres de etiquetas de elementos estándar se especifican en la sección de estilos. Por ejemplo, el documento de ejemplo establece reglas de formato para etiquetas de enlace ( elemento). Los atributos individuales de un elemento se abordan mediante la notación de puntos y el nombre del atributo.propiedades de enlace para En nuestro ejemplo, el elemento está configurado para aparecer en rojo.
Los resultados para el ejemplo de HTML se muestran en la Figura B. Uso un color de fondo diferente para ayudar a diferenciarlo del primer ejemplo.
| Figura B |
 |
| Diseño de página simple usando CSS |
Como puede ver, el diseño de las dos páginas es el mismo. La principal ventaja del enfoque CSS es la separación de contenido y formato, lo que facilita cambiar el formato modificando las hojas de estilo. En nuestro ejemplo, editar la hoja de estilo nos permitirá cambiar la fuente o el color del texto. No hay necesidad de perder el tiempo buscando documentación HTML. Una nota sobre el HTML en este artículo: las páginas se desarrollaron para cumplir con las pautas de accesibilidad y, por lo tanto, contienen atributos adicionales.
Estándares en evolución
Como la mayoría de los estándares de Internet, las iniciativas de CSS están cambiando. La versión actual 2 está disponible en el sitio W3C. A pesar de la simplicidad de los ejemplos que hemos visto aquí, CSS ofrece un enorme poder y flexibilidad al desarrollador o diseñador web. Una nota final: como siempre, la compatibilidad con los navegadores no es uniforme, por lo que los diseños deben probarse en todas las plataformas de destino.
