Cómo hacer que mi DIV y CSS Elementos Parezca una función de tabla

El elemento "Tabla HTML" está diseñado para presentar los datos en filas y columnas. Algunos diseñadores de páginas web también lo utilizan para el diseño de la página, pero es poco adecuado para esta función. El uso de elementos DIV y CSS para dar formato a ellos es una manera más fácil, más flexible para crear un diseño de página que habría requerido función de tabla en los primeros días de HTML. Un diseño basado en DIV mostrará tan pronto como se empieza a descargar, mientras que un diseño de tabla no se mostrará hasta que se complete la descarga.

Instrucciones

1 Hacer un esquema de bloques del diseño de página que desee. Por ejemplo, es posible que desee una barra horizontal de cabecera, 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 DIVs invisibles "contenedor" para mantener las cosas dispuestas correctamente.

2 Dé a cada sección de un nombre único, que se convertirá en su atributo "id". Si dos o más secciones compartirán el mismo formato, crear otro nombre exclusivo para ellos; esto se convertirá en su atributo "class".

3 Crear un nuevo archivo de diseño. Dependiendo de sus necesidades, esto puede utilizar código estático (HTML o XHTML) o el código dinámico (PHP o ASP). Añadir etiquetas DIV al cuerpo, usando los nombres id y class de la Etapa 1, con el fin de arriba a abajo. DIVs nido divs dentro de contenedores en su caso.

4 Crear una hoja de estilo con la extensión .css y enlazar con él desde su archivo de diseño. Crear una sección para cada diseño DIV. Use sus nombres id y class, junto con ya sea el selector de ID (#) o el selector de clase (.) Delante de cada uno.

5 Añadir atributos de diseño para cada sección Identificación y clase. Estos pueden incluir el relleno, el espacio, la frontera, la posición del flotador, margen, altura y anchura.

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

Consejos y advertencias

• Si ya tiene un archivo de diseño utilizando la función de tabla de diseño, lo mejor es comenzar un nuevo archivo de diseño desde cero en lugar de tratar de modificar el archivo existente. Utilice el archivo de edad para referencia y copiar y pegar contenido según sea necesario. Generalmente, usted puede reciclar el viejo estilo.
• Utilice comentarios liberalmente por lo que no se olvide lo que una sección está a favor o se pierden tratar de navegar por su código a medida que crece. Sangrías y saltos de línea en el código también ayudan a mantener el código sea más fácil de usar.
• El atributo "flotar" no funciona exactamente de la misma manera que la derecha y la alineación a la izquierda en una tabla. Si la presentación se rompe, revisar su referencia CSS para ver si necesita cambiar el modo de usar "flotar".
• Los diferentes navegadores pueden mostrar su disposición de manera diferente. Un diseño que es hermoso en Firefox se puede romper en Internet Explorer (o viceversa). Comprobar la disposición en varios navegadores.