Los diseñadores web pueden personalizar diseños de página utilizando tablas anidadas diseñando tablas más grandes y más pequeñas con varios tamaños de celda para que cada uno muestre texto, gráficos o ambos. Más particularmente, las tablas anidadas habilitaron diseños columnares en páginas web sin el uso de marcos molestos.
Esta publicación indicará:
Cómo crear/hacer una mesa en HTML?
Cómo crear una mesa anidada en HTML?
Cómo crear/hacer una mesa en HTML?
Para diseñar una mesa en HTML, el "
Se utiliza la etiqueta. Entonces, pruebe las instrucciones establecidas.
Paso 1: crear un contenedor Div
Inicialmente, cree un contenedor DIV implementando el ""Elemento y agregue un atributo de ID con un nombre específico de acuerdo con su elección.
Paso 2: Agregar encabezado
A continuación, use la etiqueta de encabezado de "" a ""Para agregar un rumbo dentro del contenedor Div. Para este propósito, hemos usado el "H1"Etiqueta de encabezado y texto incrustado dentro de la etiqueta de apertura y cierre de" H1 ".
Paso 3: Crear mesa
Para crear una tabla en HTML, inserte un "
"Etiqueta y agregue una clase dentro de la etiqueta de la tabla con un nombre específico. Luego, agregue los elementos de la lista de abajo entre las etiquetas de la tabla:
"
"Se utiliza para definir las filas en la mesa.
"
El elemento se usa para agregar los datos dentro de la tabla.
Para hacerlo, incruste los datos de texto entre
:
Sitio web del tutorial de Linuxhint
Primera organización
Segunda organización
Tercera organización
Cuarta organización
Como resultado, se ha creado una tabla simple en el HTML con éxito:
Paso 4: diseñe el contenedor Div
Para peinar el contenedor Div, primero acceda a él con la ayuda de "#contenido principal"Y aplique el estilo CSS de acuerdo con su preferencia:
#contenido principal relleno: 20px 30px; margen: 40px 140px; borde: 3px verde punteado;
Para hacerlo, hemos aplicado las propiedades de la lista a continuación:
"relleno"Determina el espacio en blanco alrededor del elemento dentro del límite definido.
"margen"Se usa para especificar el espacio fuera del borde.
"borde"Se utiliza para definir un límite alrededor del elemento definido.
Producción
Paso 5: Aplicar el estilo en la mesa
Acceda a la tabla con la ayuda de la clase de tabla y aplique el estilo con la ayuda de las propiedades CSS:
.mesa principal Border: 4px Ridge Blue; relleno: 20px 30px; Color de fondo: RGB (135, 197, 247);
En este caso, hemos aplicado el "borde","relleno", y "color de fondo" propiedades. El "color de fondo"La propiedad determina el color en la parte posterior del elemento definido.
Paso 6: Aplicar el estilo en las filas de tabla y las columnas
Acceder al "mesa", Junto con filas"TR"Y datos"TD":
tabla tr td borde: 3px verde sólido;
Luego, aplique el "borde"Propiedad CSS para agregar el límite alrededor de las filas y celdas de la tabla.
Producción
Avanzar hacia la siguiente sección si desea hacer la mesa anidada.
Cómo crear/hacer una mesa anidada en HTML?
Para hacer una mesa anidada en HTML, primero, cree una mesa con el "
"Elemento y defina filas dentro de la mesa. Luego, agregue el "
Elemento para agregar los datos dentro de los datos. Dentro de "
"Etiqueta de apertura y cierre, inserte"
"Para crear una mesa anidada dentro de la mesa.
Para implicaciones prácticas, debe probar las instrucciones establecidas a continuación.
Paso 1: Crear contenedor "Div"
Primero, cree un contenedor usando el ""Con un atributo de clase dentro de la etiqueta Div.
Paso 2: Insertar encabezado
A continuación, agregue un encabezado utilizando el ""Etiqueta e incrusta el texto entre la etiqueta.
Paso 3: Hacer mesa
Crea una tabla con la ayuda del "
"Etiqueta y agregue"
" y "
".Para agregar el texto dentro de la tabla.
Paso 4: crear una mesa anidada
Dentro de "
"Elemento, defina otro"
"Elemento para crear una tabla anidada dentro de la tabla principal. Después de eso, agregue datos de acuerdo con su necesidad:
Sitio web del tutorial de Linuxhint
Primera organización
Segunda organización
Empleado 1
Empleado 2
Empleado 3
Empleado 4
Tercera organización
Cuarta organización
Empleado 1
Empleado 2
Empleado 3
Empleado 4
Nota: Los usuarios pueden agregar tantas tablas como puedan dentro del
Elemento de la tabla principal.
Se puede ver en la siguiente salida que la tabla anidada se ha creado con éxito:
Paso 4: Mesa anidada de estilo
Acceda a la tabla anidada utilizando la identificación con el selector. En nuestro caso, para acceder a la tabla utilizando el "#mesa anidada"Y aplique el estilo con la ayuda de las propiedades CSS:
Hemos aplicado el "borde","color", y "color de fondo"Propiedades y establecer el valor de acuerdo con el deseo en la tabla anidada.
Producción
Eso se trataba de crear una mesa anidada en HTML.
Conclusión
Para hacer una mesa anidada en HTML, primero, cree una tabla utilizando el "
" etiqueta. Luego, defina las filas con la ayuda del "
"Etiqueta y agregue datos usando"
". Después de eso, dentro del "
"Etiqueta, cree otra tabla probando el mismo método. Los usuarios también pueden aplicar propiedades CSS para diseñar la mesa y la mesa anidada. Esta publicación demostró el método para crear la tabla anidada en HTML.
