Por lo general, se crea una tabla en HTML a través del "
" etiqueta. Sin embargo, la mayoría de los desarrolladores web para principiantes piensan que esta es la única forma de crear una tabla en HTML. Pero también es posible crear una tabla usando solo el ""Etiquetas en HTML y aplicando las propiedades de estilo CSS en el contenido DIV.
Esta publicación dará una solución completa a cómo crear una tabla usando solo el ""Tag y propiedades CSS.
Cómo crear tabla a través de la etiqueta y css?
Los desarrolladores pueden crear una tabla en HTML agregando un principal ""Etiqueta para crear una tabla y luego múltiples""Etiquetas dentro de él.
Ejemplo Considere el siguiente ejemplo de código HTML para crear una tabla:
IDENTIFICACIÓN Nombre Edad
001 Herrero 25
002 John 31
003 Charles 28
En el fragmento de código arriba:
A ""Se agrega la etiqueta con la clase llamada"divtible".
Dentro de "div"Elemento de contenedor, agregue otro"div"Elemento de contenedor con la clase declarado como"ardor".
De nuevo, agregue tres "div"Elementos que tienen las clases nombradas"divisor"Con tres contenedores con el"divcell" clase.
Luego, agregue tres elementos Div, agregue el "IDENTIFICACIÓN","Nombre" y "Edad"En la fila de encabezado de la mesa.
Después de eso, especifique los valores de "ID", "Nombre" y "Edad" para cada elemento DIV.
Se trataba de cómo usar el "divElemento para crear una tabla. Ahora, aplicemos las propiedades CSS:
.divtible
Pantalla: tabla; Ancho: Auto; Color de fondo: #EEE; borde: 1px Solid #666666; espaciado fronterizo: 5px;
.divisor
Ancho: Auto; Pantalla: hilera de mesa;
.divcell
Ancho: 150px; flotador izquierdo; Pantalla: columna de tabla; Color de fondo: RGB (212, 209, 209);
En el elemento de estilo CSS anterior:
Agregue un selector que se refiera al "divtible"(Eso contiene todos los valores de la tabla) y defina las propiedades CSS deseadas (I.mi., "mostrar","ancho","color de fondo","borde" y "espacio fronterizo") Para el contenido de la tabla.
Después de eso, agregue un selector de clase que seleccione los elementos del "divisor"Clase para agregar el CSS"ancho" y "mostrar"Propiedades a los elementos.
Por último, agregue las propiedades de estilo CSS a los elementos en el ".divcell"Selector de clases.
Esto creará una tabla en la salida y mostrará los siguientes resultados:
Se trataba de crear una tabla en HTML usando solo etiquetas y propiedades CSS.
Conclusión
También se puede crear una tabla en HTML a través de solo la etiqueta Div y las propiedades de estilo CSS. Para hacerlo, cree un elemento de contenedor DIV principal separado para crear la tabla y algunos elementos de contenedor DIV separados dentro de eso para crear las filas de la tabla. Cada elemento de contenedor Div tendrá su identificación o clases respectivas. Además, los selectores de clase se utilizan para seleccionar los elementos DIV y aplicarles las propiedades CSS. Esta publicación guió sobre la creación de una tabla solo usando la etiqueta div y CSS.
