El elemento "Tabla HTML" está diseñado para presentar datos en filas y columnas. Algunos diseñadores también utilizan para el diseño de la página, pero está mal adaptado a esta función. Utilizando elementos DIV y CSS para formatearles es una forma más fácil y más flexible para crear un diseño de página que hubiera requerido la función de tabla en los primeros tiempos del HTML. Un diseño basado en el DIV se mostrará tan pronto como empieza a descargar, y no muestra una disposición de las mesas hasta que se complete la descarga.

Instrucciones

1 Hacer un dibujo de bloque de diseño de página que desee. Por ejemplo, puede desear una barra horizontal encabezado, una barra de navegación horizontal más estrecha y una barra lateral vertical además de un área de contenido principal. Decidir exactamente cómo desea que estas secciones dispuestas. Cada bloque representa un DIV; puede usar invisible div "contenedor" para mantener las cosas dispuestas correctamente.

2 Dar a cada sección un nombre único, que se convertirá en su atributo "id". Si dos o más secciones que comparten el mismo formato, crear otro nombre único Esto se convertirá en su atributo "class".

3 Cree un nuevo archivo de diseño. Dependiendo de sus necesidades, esto puede usar código estático (HTML o XHTML) o código dinámico (PHP o ASP). Añadir etiquetas DIV para el cuerpo, usando los nombres de clase y id del paso 1, en orden de arriba a abajo. Anidar DIVs dentro de contenedor div en su caso.

4 Crear una hoja de estilos con la extensión. CSS y enlace a él desde el archivo de diseño. Crear una sección para cada diseño DIV. uso sus nombres de id y clase, junto con el selector de id (#) o el selector de clase (.) delante de cada uno.

5 Agregar atributos de diseño a cada sección del id y clase. Estos pueden incluir relleno, espaciado, frontera, posición, flotador, márgenes, altura y anchura.

6 Comprobar el diseño en varios navegadores y ajustar según sea necesario.

Consejos y advertencias

• Si ya tienes un archivo de diseño utilizando la función de mesa de diseño, es mejor iniciar un nuevo archivo de esquema desde cero en lugar de tratar de modificar el archivo existente. Usar el antiguo archivo de referencia y copia y pega el contenido según sea necesario. Generalmente puede reciclar la vieja hoja de estilos.
• Utilice comentarios abundantemente para que no olvide qué sección es para o perderse tratando de navegar por su código como crece. Hendiduras y saltos de línea en el código también ayudan a mantener el código más fácil de usar.
• El atributo "float" no funciona exactamente igual que la alineación derecha e izquierda de una tabla. Si el esquema se rompe, revise su referencia CSS para ver que si necesita cambiar la forma de usar "float".
• Distintos navegadores pueden mostrar tu diseño diferente. Se puede romper un trazado que es hermoso en Firefox en Internet Explorer (o viceversa). Comprobar el diseño en varios navegadores.