Inicio » Internet » Construcción del software » Cómo hacer una página Web utilizando DIV en lugar de una tabla

Cómo hacer una página Web utilizando DIV en lugar de una tabla


Tablas HTML se han utilizado para controlar el formato de una página web, incluyendo texto, imágenes, campos de formulario y otras tablas. Sin embargo, son más apropiados para manejar datos de texto que imágenes y tablas anidadas. El CSS (hoja de estilos en cascada) “

” etiqueta se puede utilizar para crear un formato similar a la tabla que está más preparado para manejar imágenes, campos de formulario y otras tablas. También, a diferencia de tablas, se puede en un documento externo la hoja de estilos y se relaciona en el documento HTML, lo que significa una hoja de estilos se puede utilizar a través de varias páginas en su sitio.

Dificultad: fácil

Instrucciones

    CSS

  1. Abrir un documento de texto en cualquier editor de texto.
  2. Crear el elemento de la tabla con el siguiente código:

    #table {width: 90%; pantalla: tabla; border: 1px solid black;}

  3. Crear el elemento de la fila con el siguiente código:

    #row {Mostrar: fila de la tabla;}

  4. Crear los elementos de la célula con el siguiente código:

    #left {width: 200px; padding: 1em; border: 1px solid black; Mostrar: celda de tabla;}

    #right {width: 200px; padding: 1em; border: 1px solid black; Mostrar: celda de tabla;}

    #middle {acolchado: 1em; border: 1px solid negro; Mostrar: celda de tabla;}

  5. Guarde el archivo con el nombre “table.css”
  6. HTML

  7. Abrir un segundo documento de texto.
  8. Escriba las siguientes líneas para iniciar el documento html y el enlace a la hoja de estilos:

  9. Escriba las siguientes líneas para crear la tabla:

  10. Escriba la línea siguiente para crear la fila:

  11. Escriba las siguientes líneas para crear las celdas de las tabla:

    Izquierda

    Se trata de la columna de la izquierda

    Centro

    Se trata de la columna central

  12. Escriba las siguientes líneas para cerrar las etiquetas “
    ” y el documento HTML:

  13. Guardar el documento con la extensión “.html”.
  14. Prueba tu mesa al abrir el documento HTML en un explorador web.