Tecnología

Cómo hacer una página web usando DIV en lugar de una tabla

Escrito por kristen waters | Traducido por contributing writer

Las tablas de 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 adecuadas para manejar datos de texto que imágenes y tablas anidadas. La etiqueta CSS (Hojas de Estilo en Cascada, Cascading Style Sheet en inglés) se puede utilizar para crear un formato de tabla, que sea más adecuado para manipular imágenes, campos de formulario y otras tablas. Además, a diferencia de éstas, la hoja de estilo puede hacerse en un documento externo y vincularse al documento HTML, lo que significa que una hoja de estilo puede ser utilizada a través de varias páginas en tu sitio.

Nivel de dificultad:
Fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Abre un documento en cualquier editor de texto.

  2. 2

    Crea el elemento de la tabla con el siguiente código: #table{ width: 90%; display: table; border: 1px solid black;}

  3. 3

    Crea el elemento de la fila con el siguiente código: #row{display: table-row;}

  4. 4

    Crea los elementos de las celdas con el siguiente código: #left { width:200px; padding:1em; border: 1px solid black; display: table-cell; } #right { width:200px; padding:1em; border: 1px solid black; display: table-cell; } #middle { padding: 1em; border: 1px solid black; display: table-cell; }

  5. 5

    Graba el archivo con el nombre "table.css".

  1. 1

    Abre un segundo documento de texto.

  2. 2

    Escribe siguientes las líneas al inicio del documento HTML y que enlaza a la hoja de estilos: <html> <head> <link rel="stylesheet" type="text/css" href="table.css" /> </head>

  3. 3

    Escribe las siguientes líneas para crear la tabla:

  4. 4

    Escribe la siguiente línea para crear la fila: <body> <div id="table">

  5. 5

    Escribe las siguientes líneas para crear las celdas de la tabla: <div id="left"> <h4>Left</h4> <p>This is the left column</p> </div> <div id="middle"> <h4>Center</h4> <p>This is the center column</p> </div> <div id="right"> <h4>Right</h4> <p>This is the right column</p>

  6. 6

    Escribe las siguientes líneas para cerrar las etiquetas <div> y finalizar el documento HTML: </div> </div> </div> </body> </html>

  7. 7

    Graba el documento con una extensión de archivo ".html".

  8. 8

    Comprueba tu tabla abriendo el documento HTML en un navegador web.

Más galerías de fotos

comentarios

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles

Copyright © 1999-2014 Demand Media, Inc. Acerca de

El uso de este sitio constituye la aceptación de los términos y política de privacidad de eHow. Ad Choices es-US

Demand Media