Espaciado de células CSS

En este artículo, revisaremos numerosas opciones estilísticas que darán a los componentes de la tabla como encabezados de tabla y células de datos de tabla algo de espacio. El atributo CSS más utilizado en esta circunstancia es la propiedad de separación fronteriza que se explorará e implementará en este tutorial utilizando el Notepad ++ IDE. Para aplicar esta noción en un archivo HTML, se utilizarán muchas opciones estilísticas como CSS en línea y el método de etiqueta de estilo CSS.

Ejemplo 01: Uso del enfoque de etiqueta de estilo CSS para agregar espaciado a las celdas de la tabla en un archivo HTML

En este ejemplo, espaciaremos las celdas de la tabla utilizando la propiedad de separación del borde. En este ejemplo, el método CSS de etiqueta de estilo se utilizará para agregar características estilísticas a los componentes de la tabla. El IDE Notepad ++ se utilizará para editar el archivo HTML.

En el script anterior, comenzaremos con el encabezado del archivo donde abriremos la etiqueta de estilo. En esta etiqueta, daremos dos propiedades de estilo a todos los elementos generalizando los elementos y creando clases separadas para ellos. Primero, definiremos el estilo para toda la tabla donde definiremos la propiedad de separación de borde que luego asignará un espacio específico entre el contenido de una celda y su borde.

Entonces, crearemos otra clase de estilo. En esta clase, daremos un estilo al encabezado de la tabla, los datos de la tabla y la tabla misma, definiendo la longitud, la forma y el color del borde. Entonces, cerraremos el estilo y la etiqueta de la cabeza y abriremos la etiqueta del cuerpo. En la etiqueta del cuerpo, crearemos una mesa con dos filas. En la primera fila, le daremos a la tabla tres columnas usando la etiqueta "th" que define el encabezado de la tabla. En la segunda fila, insertaremos el contenido en las columnas de la tabla utilizando la etiqueta "TD". Entonces, cerraremos la etiqueta de la tabla y la etiqueta del cuerpo. Guardar este script en el ".El formato HTML ”nos permitirá abrirlo en nuestro navegador y obtener la siguiente salida:

Podemos ver en el resultado anterior que las diferentes celdas de la tabla tienen una distancia regular entre ellas que se determinó en el atributo de separación de borde dentro de la etiqueta de estilo.

Ejemplo 02: utilizando el enfoque de estilo CSS en línea para agregar espaciado a las celdas de la tabla en un archivo HTML

En este ejemplo, utilizaremos la propiedad de separación de borde y algo de estilo para dar a los componentes de la tabla como el encabezado de la tabla y los datos de la tabla algunos espaciados. El enfoque CSS en línea se utilizará en este ejemplo para aplicar las características de estilo a los componentes de la tabla.

En el script anterior, comenzaremos con el cuerpo del archivo donde abriremos la etiqueta de estilo en cada elemento individualmente. Primero, abriremos la etiqueta de la tabla y asignaremos CSS a través de la palabra clave de estilo. Asignaremos la tabla con un borde de ancho "1px", forma sólida y color negro junto con la propiedad de separación de borde. Luego, abriremos nuestra primera fila de tabla donde definiremos los nombres de la columna usando la etiqueta "th", en la que también usaremos CSS en línea para dar propiedades de estilo al elemento. Después de esto, agregaremos otra fila en la que definiremos los datos de la tabla utilizando la etiqueta "TD" y usaremos CSS en línea para dar a los datos un borde también. Entonces, cerraremos la mesa y la etiqueta del cuerpo. Guardaremos este archivo y lo abriremos en nuestro navegador para obtener el resultado de este script en la página de nuestro navegador.

En el fragmento anterior, podemos observar que ambas hileras de la tabla tienen algunos espacios entre ellos que se definieron en las etiquetas por CSS en línea.

Ejemplo 03: Uso de la técnica CSS de separación de borde de dos dimensiones para una tabla en un archivo HTML

En este ejemplo, utilizaremos el atributo de separación del borde de dimensión de doble dimensión para darle a las células de la tabla algo de espacio. En este ejemplo, la técnica CSS de etiqueta de estilo se utilizará para aplicar características estilísticas a los componentes de la tabla.

En el siguiente script, comenzaremos con el encabezado del archivo donde abriremos la etiqueta de estilo. Al generalizar los componentes y establecer clases distintas para cada una, les proporcionaremos a todos dos parámetros de estilo en esta etiqueta. Primero, crearemos el estilo para toda la tabla, incluida la propiedad de separación de borde, que asignará una distancia definida entre el contenido de una celda y su borde en dos dimensiones de forma independiente.

Luego, en otra clase de estilo, aplicaremos el estilo al encabezado de la tabla, los datos de la tabla y la tabla misma estableciendo la longitud del borde, la forma y el color. El estilo y las etiquetas de la cabeza se cerrarán mientras se abrirá la etiqueta del cuerpo. Haremos una mesa con dos filas en la etiqueta del cuerpo. La etiqueta "th" se usará en la primera fila para especificar el encabezado de la tabla. Y la etiqueta "TD" se usará en la segunda fila para insertar datos en las columnas de la tabla. Luego, cerraremos la tabla y las etiquetas del cuerpo guardando este script en ".Formato HTML "para que podamos ejecutarlo en nuestro navegador y obtener los siguientes resultados:

En la salida anterior, podemos ver que las celdas individuales de la tabla tienen dos espacios diferentes horizontal y verticalmente entre ellos que se definió en la propiedad de espaciado de la frontera dentro de la etiqueta de estilo.

Ejemplo 04: usando el método alternativo para asignar espacio entre los elementos de la tabla

En este ejemplo, utilizaremos la alternativa de la propiedad de separación de borde para proporcionar algún estilo a los componentes de la tabla, como el encabezado de la tabla y los datos de la tabla. El enfoque de etiqueta de estilo CSS se utilizará en este ejemplo para asignar atributos estilísticos a los componentes de la tabla.

En el siguiente script, comenzaremos con el encabezado del archivo y abriremos el estilo que resume los componentes y asignaremos una sola clase a cada parte. Primero, diseñaremos el estilo para toda la tabla, incluida la función de colapso del borde, que colapsa el borde de cada elemento para agregar espacio entre ellos. El encabezado de la tabla, los datos de la tabla y la tabla en sí se diseñarán ajustando la longitud del borde, la forma y el color. La etiqueta del cuerpo se abrirá, pero el estilo y las etiquetas de la cabeza se cerrarán.

En la etiqueta del cuerpo, crearemos una mesa con dos filas. La etiqueta "th", que especifica el encabezado de la tabla, se usará en la primera fila para dar a la tabla tres columnas. La etiqueta "TD" se usará en la segunda fila para poner información en las columnas de la tabla. Entonces, cerraremos la mesa y las etiquetas del cuerpo. Almacenaremos este guión en ".Formato HTML "para que podamos acceder a él en nuestro navegador y recibir el siguiente resultado:

En la salida anterior, es visible que los elementos de la tabla tengan un solo borde con algo de espacio debido a la propiedad del colapso del borde.

Conclusión:

En este artículo, discutimos varias propiedades de estilo que nos ayudaron a darle a las células de la tabla algo de espacio. La propiedad de espaciado fronterizo es la propiedad más utilizada en este escenario que se discutió e implementó en este artículo utilizando el Notepad ++ IDE. Hemos agregado tres ejemplos únicos junto con su explicación para cada paso para la facilidad de nuestros usuarios.