Cómo usar divs de CSS para reemplazar tablas

Escrito por kristen waters | Traducido por manuel lama paniagua
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo usar divs de CSS para reemplazar tablas
Puedes utilizar la etiqueta "" para crear las mismas filas y columnas que se encuentran en una tabla, y formatear la anchura y la altura de cada celda individualmente, lo que te da más control sobre la ubicación de los elementos. (Photodisc/Photodisc/Getty Images)

Las tablas HTML están diseñadas para contener datos de texto que estén ordenadas en filas y columnas, y aunque también se pueden utilizar tablas para colocar las imágenes y otros elementos de una página, es mejor usar la etiqueta HTML "<div>", junto con hojas de estilo en cascada o CSS, para dar formato a una página. Puedes utilizar la etiqueta "<div>" para crear las mismas filas y columnas que se encuentran en una tabla, y formatear la anchura y la altura de cada celda individualmente, lo que te da más control sobre la ubicación de los elementos.

Nivel de dificultad:
Fácil

Otras personas están leyendo

Instrucciones

    CSS

  1. 1

    Abre un documento de texto plano en cualquier editor de texto.

  2. 2

    Teclea lo siguiente para crear el estilo para la parte exterior de la tabla:

    container

    { display: table; border-style: solid; border-width: 2px; width: 100%; }

  3. 3

    Teclea lo siguiente para crear el estilo de las filas de la tabla:

    row

    { display: table-row; height:100px; border-style: solid; border-width: 2px; }

  4. 4

    Teclea lo siguiente para crear el estilo de las columnas de la tabla:

    col

    { display: table-cell; text-align: center; vertical-align: top; border-style: solid; border-width: 2px; }

  5. 5

    Guarda el archivo como "css_table.css.".

    HTML

  1. 1

    Abre un documento de texto plano en cualquier editor de texto.

  2. 2

    Teclea lo siguiente para comenzar el documento HTML y unirlo al documento CSS.

    <html> <head> <link rel="stylesheet" type="text/css" href="css_table.css" /> </head> <body>

  3. 3

    Teclea lo siguiente para iniciar el contenedor al que se fijará la tabla:

    <div id = "container">

  4. 4

    Teclea lo siguiente para crear la primera fila que contiene tres columnas:

    <div id = "row"> <div id = "col"> <p>Primera columna</br> Fila uno </br></p> </div> <div id = "col"> <p>Segunda columna</br> Fila uno </br></p> </div> <div id = "col"> <p>Tercera columna</br> Fila uno</br></p> </div> </div>

  5. 5

    Teclea lo siguiente para crear la segunda fila que contiene tres columnas:

    <div id = "row"> <div id = "col"> <p>Primera columna</br> Fila dos </br></p> </div> <div id = "col"> <p>Segunda columna</br> Fila dos </br></p> </div> <div id = "col"> <p>Tercera columna</br> Fila dos</br></p> </div> </div>

  6. 6

    Teclea lo siguiente para cerrar el div del contenedor y el documento HTML:

    </div> </body> </html>

  7. 7

    Guarda el documento como "css_table.html".

  8. 8

    Abre el documento HTML en cualquier navegador web para mostrar la tabla.

No dejes de ver

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