El relleno celular se define como el espacio en el medio de los datos de la celda y el borde. Cuando colocamos los datos en las celdas de la tabla, debemos crear espacio entre el borde de la celda y sus datos. Este espaciado se conoce como relleno celular en CSS. Podemos establecer el relleno izquierdo de la célula, el acolchado derecho, el acolchado superior y el relleno inferior por separado, así como el relleno combinado para todos los lados. Si no establecemos este relleno de celda en nuestras celdas de tabla, se establecerá de forma predeterminada de acuerdo con los datos de las celdas. Tenemos diferentes propiedades en CSS para configurar este relleno celular.
Al usar la propiedad de "relleno", ajusta el relleno en los cuatro lados dentro de la celda. Pero si queremos establecer el relleno solo en un lado, entonces también tenemos las propiedades para configurar esto. En esta guía, exploraremos la propiedad de relleno celular en CSS y realizaremos ejemplos aquí en los que utilizaremos estas propiedades.
Propiedades para el relleno celular en CSS:
Relleno: valor.
ROLED-PARTIR: Valor.
Right de relleno: valor.
Top-top: valor.
Botón de relleno: valor.
Ejemplo 1:
Como debemos aplicar las propiedades de relleno de células en nuestras células de tabla, por lo que debemos construir la tabla. Primero, usaremos estas propiedades en él. Podemos crear la tabla en HTML agregando algunas etiquetas que se utilizan para construir la tabla. Aquí, vamos a construir una tabla en HTML abriendo el archivo. Después de agregar etiquetas básicas del HTML, comenzamos a construir la tabla en el cuerpo del código HTML. Ponemos el "
" etiqueta. En esta etiqueta, vamos a crear la fila de encabezado usando la etiqueta "tr" y luego la etiqueta "th". En la etiqueta "th" estamos agregando algunos datos aquí. Luego, nuevamente usamos "TR" para cada fila.
Entonces, estamos usando la etiqueta "TD" en esta etiqueta "TR". Y agregue datos en este "TD" para que agregue datos a las filas de la tabla. Después de completar este código, debemos guardarlo con el ".Extensión del archivo HTML "y debemos vincular este archivo con el archivo CSS dentro del" cabezal "de este archivo HTML. Usaremos esta tabla en todos los ejemplos de esta guía, pero aplicaremos diferentes propiedades de relleno celular en cada ejemplo. Ahora, después de guardar esto, vamos a avanzar hacia el archivo CSS en el que usaremos propiedades CSS. Entonces, todas estas propiedades se aplicarán aquí en esta tabla.
Hemos creado uno en HTML. Entonces, aquí lo vamos a diseñar un poco usando la propiedad de "color". Ponemos el color de fuente en "Maroon". Luego, también establecemos su "Fuente-Familia" y usamos el "Argelino" como el valor de esta propiedad. Luego, aplique el borde "2px" en toda la tabla. El tipo se establece aquí en "sólido" y el color del "borde" es "granate".
A continuación, se establece el "ancho" de la tabla. Ponemos "Auto" aquí para que el ancho se ajuste automáticamente de acuerdo con los datos. Después de esto, la propiedad de "colapso fronterizo" está aquí, y es "colapso". Entonces, el borde de la mesa se derrumbará. Ahora, necesitamos crear un borde para cada celda. Entonces, para esto, nuevamente estamos utilizando la propiedad "fronteriza" para "th" y "td". Los datos que se escriben en estas celdas se establecen en el color "negro" en la propiedad "color".
Ahora, estamos configurando el relleno celular con la ayuda de la propiedad de "relleno" en CSS y establecemos el relleno "15px" aquí. Creará un espacio de 15px entre la celda y los datos de los lados superior, izquierdo, inferior y derecho. Si queremos aplicar el mismo relleno en los cuatro lados, utilizamos esta propiedad de "relleno". Esta propiedad aplica el relleno por todos lados.
En esta salida, observe que hay un espacio entre el texto que se escribe dentro de la celda y el borde de esta celda. El espacio de los cuatro lados es igual. Este es un relleno celular en CSS y esta propiedad de "relleno" establece el igual acolchado en todos los lados.
Ejemplo # 2:
Aquí, el código es el mismo que discutimos en el primer ejemplo. Simplemente cambiamos el "color" del encabezado y el color del "borde" de la celda a "verde". Cuando usamos esta propiedad de "acolchado-izquierda", ajustará el acolchado de la celda en el lado izquierdo solo. Establecemos el valor de "Padding-izquierda" en "60px". Creará un espacio de 60px en el lado izquierdo de los datos de la celda y el borde de la celda.
En esta salida, hay un espacio en el lado izquierdo entre los datos y el borde de todas las celdas. Esto se debe a que usamos la propiedad de "acolchado-izquierda" aquí. Entonces, crea el espacio deseado solo en el lado izquierdo y no aplica este relleno en los tres lados restantes.
Ejemplo # 3:
En este ejemplo, simplemente cambiamos el "color" del encabezado, el color del "borde" de la celda y la mesa a "naranja". Cuando usamos la propiedad de "relleno-derecha", solo afecta el relleno de celdas en el lado derecho. Hará un espacio entre los datos que están presentes dentro de la celda y el borde derecho de la celda. El valor de "relleno-derecha" aquí se establece en "50px."Dejará una brecha de 50 px entre los datos de la célula y el borde de la célula en el lado derecho.
Puede ver que hay un espacio solo en el lado derecho entre los datos y el borde de todas las celdas. Esto se debe a la propiedad de "relleno de la derecha" que se está utilizando. Como resultado, solo crea el relleno necesario en el lado derecho e ignora los tres lados restantes.
Ejemplo # 4:
Aquí, simplemente alteramos el "color" del encabezado, el "borde" de las celdas y el borde de la mesa al "azul". Estamos utilizando la propiedad CSS "Relling-Top" en este momento. La propiedad de la "cima de relleno" solo afecta el relleno de las celdas en la parte superior cuando se usa. La "cima de relleno" se establece en "55px" en este caso. En la parte superior, habrá una brecha de 55 px entre los datos de la célula y el borde de la célula.
Aquí, en el lado superior de cada celda hay un espacio entre los datos y el límite de la celda. Esto se debe al uso de la propiedad "conmovedora". Como resultado, solo agrega el relleno necesario al lado superior.
Ejemplo # 5:
Ahora, estamos cambiando el "color" del encabezado, el "borde" de las celdas y la mesa a "púrpura". Estamos utilizando la propiedad CSS, "Bottom". Cuando se aplica el atributo "Bottom", solo establece el relleno de células en la parte inferior. Hará que un relleno celular entre los datos dentro de la celda y el borde inferior de la celda. En este escenario, el "fondo del relleno" está configurado en "53px".
Aquí, puede observar el espacio entre los datos dentro de la celda y el borde inferior de la celda. A medida que usamos la propiedad "Bottom", agrega el relleno celular solo en la parte inferior de la celda.
Conclusión:
Esta guía ha explicado el concepto de relleno celular en CSS en detalle. Hemos discutido diferentes propiedades de relleno aquí y hemos utilizado estas propiedades en diferentes códigos CSS. Establecimos que en CSS, ajustamos el acolchado de la celda en todos los lados de la celda utilizando la propiedad de "relleno" y aplicamos relleno en un lado solo utilizando diferentes propiedades de relleno. Observamos una variedad de códigos en los que hemos utilizado estas propiedades, así como los efectos de estas propiedades en la celda de la tabla. Establecerá el acolchado de la celda después de leer esta guía a fondo.
