¿Qué es el relleno de células de mesa en CSS?
Por defecto, una tabla tiene celdas muy estrechas, lo que podría conducir a problemas de visibilidad. Para evitar esto, preferimos usar la propiedad de relleno CSS para rellenar las celdas de una tabla. El relleno hace que las células sean más amplias y más grandes que su tamaño predeterminado. Como resultado, la tabla se verá bien con una presentación clara de datos.
En este artículo, describiremos cómo usar el relleno celular en una tabla en CSS.
Cómo usar el relleno de células de mesa en CSS?
En CSS, el "relleno"La propiedad agrega espacio nulo alrededor del contenido de elementos. También se utiliza para controlar el espacio desde cada lado. Por ejemplo, el relleno desde solo el lado izquierdo se puede agregar utilizando la propiedad de la izquierda de relleno. Del mismo modo, las propiedades de relleno, la cima de relleno y el fondo del relleno se pueden usar para crear el espacio alrededor del contenido del elemento desde la derecha, la parte superior e inferior, respectivamente.
Para agregar relleno en la celda de la tabla, siga el ejemplo dado.
Ejemplo 1: Agregue el relleno en las celdas de la tabla utilizando la propiedad de relleno
En nuestra página HTML, tenemos una mesa con bloques muy estrechos. Agreguemos algo de espacio en los bloques de la mesa:
Aquí está el código HTML actual para nuestra página web:
Linux Pista LLC EE.UU
Ahora, tomemos el "TD"O celda de datos de tabla junto con la tabla y aplique el"estilo de borde"Propiedad como"sólido". De esta manera, puede obtener el borde alrededor de la mesa y su contenido. En el siguiente paso, use el "relleno"Propiedad con el valor"1rem". Como resultado, la celda de la tabla se volverá más larga y más amplia:
Guarde su archivo HTML y inicíelo en el navegador web para ver el resultado:
Como puede ver, el relleno se ha agregado con éxito a la celda de la tabla:
Ejemplo 2: Ajuste el relleno en las celdas de la tabla de cada lado
En este ejemplo, colocaremos nuestro texto en la esquina superior izquierda de la celda. Para eso, asignaremos el "relleno"Valor de propiedad como"0px 35px 30px 0px", Donde el primer 0px es para la parte superior, el segundo valor de 35px es para la derecha, 30px para la parte inferior y cuarto valor 0px es para el relleno del lado izquierdo:
Producción
Te hemos explicado qué es el relleno de células de mesa y cómo usarlo.
Conclusión
Las celdas de la tabla tienen un espacio limitado por defecto, y esto podría causar problemas de legibilidad para el espectador. Para esto, el CSS "rellenoSe utiliza la propiedad para agregar algo de espacio a la celda de la tabla. En esta guía, le hemos ayudado a comprender qué es el relleno de células de mesa. Además, también hemos mostrado diferentes ejemplos relacionados con agregar relleno celular usando CSS.