¿Cómo agregar espacio entre columnas sin afectar las filas en una tabla HTML?
Las propiedades de relleno izquierda y derecha se utilizan para agregar espacio entre columnas sin afectar el diseño general de la tabla. Esta propiedad permite a los desarrolladores agregar espacio adicional y este espacio no afecta las filas.
Siga los pasos a continuación:
Paso 1: crea una estructura de tabla
Supongamos que hay una tabla en el archivo HTML que contiene cuatro filas y tres columnas:
< mesa >
< tr >
< el > Nombre < / el >
< el > Clase < / el >
< el > Ciudad < / el >
< / tr >
< tr >
< td > John < / td >
< td > licenciatura en química < / td >
< td > Londres < / td >
< / tr >
< tr >
< td > Alejandro < / td >
< td > Licenciatura en Matemáticas < / td >
< td > Tokio < / td >
< / tr >
< tr >
< td > Joseph < / td >
< td > licenciatura en ciencias < / td >
< td > Nueva York < / td >
< / tr >
< / mesa >
Después de ejecutar el código anterior, la página web se ve así:
El resultado confirma que se ha creado una estructura de tabla.
Paso 2: Aplicación de relleno horizontal
Para agregar espacio entre columnas desde el lado izquierdo, use el ' relleno-izquierda ” Propiedad CSS. Después de aplicar esta propiedad, los datos se ven como la alineación correcta. La razón es que el relleno solo se aplica desde el lado izquierdo.
Ahora seleccione el elemento 'td' en la parte CSS de los estilos que se pueden aplicar usando el método en línea. Luego, agregue relleno de ' 50px ” para agregar espaciado y agregar propiedades de borde para una mejor visualización:
td {relleno-izquierda: 50px;
borde : 2px rojo sólido;
}
Después de ejecutar el código, la página web se ve así:
El resultado muestra que el espacio se agrega entre las columnas de la tabla.
Ahora, para establecer el relleno desde el lado derecho, el ' acolchado-derecho Se utiliza la propiedad. De la misma manera, pero ahora los datos de la celda se ven ' alineado a la izquierda ”. El código es:
td {relleno-izquierda: 50px;
borde : 2px rojo sólido;
}
Después de ejecutar el código anterior, la página web se ve así:
El resultado confirma que el espacio entre las columnas aumenta aplicando relleno en el lado derecho.
Paso 3: combinación de relleno izquierdo y derecho
Como en el paso anterior, los datos no están alineados al centro en ambos casos y eso hace que los datos no sean profesionales. Para hacerlo prominente sin romper el sentido del diseño. Ambas propiedades se pueden utilizar al mismo tiempo como se indica a continuación:
td {relleno derecho: 60px;
relleno-izquierda: 60px;
borde : 2px rojo sólido;
}
Después de ejecutar el código anterior, la página web se ve así:
El resultado confirma que el espacio se agrega entre las columnas y los datos también están alineados al centro.
Conclusión
El espacio entre las columnas de la tabla se puede agregar con la ayuda de las propiedades de relleno izquierda y derecha. Estas propiedades agregan espacio adicional desde las direcciones derecha e izquierda a la celda. Ambas propiedades se pueden utilizar al mismo tiempo o por separado. Este artículo ha demostrado con éxito cómo agregar espacio entre las columnas de la tabla sin afectar las filas.