Cómo y por qué usar Celera de mesa de pantalla en CSS

Hay múltiples propiedades CSS para diseñar los elementos de HTML. El "mostrarLa propiedad es una de ellas, que se utiliza para establecer el elemento que se gestiona como un elemento o elemento de bloque en línea. Además, el diseño utilizado para sus hijos, como flujo, flex o cuadrícula. Además, esta propiedad asigna los tipos internos y externos para mostrar un elemento.

Esta publicación explicará:

• • Cómo usar "Display: Table-Cell" en CSS?
  • Por qué usar "Display: Table-Cell" en CSS?

Cómo usar "Display: Table-Cell" en CSS?

Usar el "mostrar"Propiedad con el valor"celda", Pruebe las instrucciones dadas.

Paso 1: Hacer contenedores DIV anidados

Primero, cree el contenedor DIV principal con la ayuda del ""Etiqueta e inserte el"identificación"Atributo dentro de la etiqueta Div. Luego, entre la etiqueta Div, agregue más contenedores y agregue un "clase"Atributo en cada div:

Herry

Se puede notar que los datos se han agregado con éxito:

Paso 2: contenedor de estilo "contente de mesa" de estilo

Para acceder al Div principal, utilice el "#contenido de mesa", dónde "#"Es un selector utilizado para acceder al especificado"identificación"Atributo del contenedor Div. Luego, aplique las siguientes propiedades:

#contenido de mesa
Pantalla: tabla;
relleno: 7px;

Aquí:

• • El "mostrar"La propiedad define y determina cómo se ve un elemento. Para hacerlo, el valor de esta propiedad se establece como "mesa"Para hacer la mesa.
  • "relleno"Asigna el espacio dentro del contenedor.

Paso 3: contenedor de estilo "tr-div" de estilo

Ahora, diseñe el "TR-DIV"Contenedor de la siguiente manera:

.tr-div
Pantalla: hilera de mesa;
Color de fondo: RGB (164, 241, 215);
relleno: 7px;

Según el bloque de código anterior, el "mostrar"El valor de la propiedad se establece como"fila de la tabla"Lo que significa que los datos se establecen en forma de filas en una tabla", "color de fondo"La propiedad se utiliza para especificar el color en la parte posterior del elemento y, por último,"relleno" Está aplicado:

Paso 4: Aplicar la propiedad "Pantalla: Célula de mesa" en el contenedor "TD-Div"

.TD-Div
Display: Cel-Cell;
Ancho: 150px;
borde: #0f4bf0 sólido 1px;
margen: 5px;
relleno: 7px;

Acceda al tercer Div con la ayuda de ".TD-DIV"Dot selectivo y la identificación respectiva, y aplique las propiedades CSS que se dan a continuación:

• • El valor del "mostrar"La propiedad se establece como"celda"Que se utiliza para hacer la celda y agregar datos a la celda.
  • "ancho"Especifica el tamaño de la celda de la tabla horizontalmente.
  • "borde"Define un límite alrededor de las células.
  • "margenLa propiedad asigna el espacio fuera del borde definido.
  • "relleno"Especifica el espacio dentro del límite.

Producción

Por qué usar "Display: Table-Cell" en CSS?

El "Pantalla: celda de mesa"La propiedad CSS se utiliza para configurar una pantalla en datos que hace que el elemento se comporte como una tabla. Por lo tanto, los usuarios pueden crear un duplicado de una tabla en HTML sin utilizar el elemento de tabla y otros elementos, incluidos TD y TR. Más específicamente, su propiedad define los datos en forma de una tabla.

Conclusión

Usar el "Pantalla: celda de mesa"Propiedad CSS, cree contenedores DIV anidados e inserte una clase en cada contenedor con un nombre específico. Luego, acceda al contenedor DIV en CSS y aplique la propiedad "Pantalla: Célula de mesa", donde el "mostrarSe utiliza la propiedad para configurar los datos en las celdas de la tabla. Esta publicación demostró el método para utilizar la pantalla: propiedad CSS de células de mesa.