Cómo usar divs de CSS para reemplazar tablas (En 13 Pasos)

Por kristen waters
Cómo usar divs de CSS para reemplazar tablas (En 13 Pasos)
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 "

", junto con hojas de estilo en cascada o CSS, para dar formato a una página. 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.

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.

Paso 3

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

Paso 4

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

Primera columna
Fila uno

Segunda columna
Fila uno

Tercera columna
Fila uno

Paso 5

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

Primera columna
Fila dos

Segunda columna
Fila dos

Tercera columna
Fila dos

Paso 6

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

Paso 7

Guarda el documento como "css_table.html".

Paso 8

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