Cómo usar divs de CSS para reemplazar tablas

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.
Por kristen waters

CSS


Paso 1

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


Paso 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%; }


Paso 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; }


Paso 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; }


Paso 5

Guarda el archivo como "css_table.css.".


HTML


Paso 1

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


Paso 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>


Paso 3

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

<div id = "container">


Paso 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>


Paso 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>


Paso 6

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

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


Paso 7

Guarda el documento como "css_table.html".


Paso 8

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