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