Cómo eliminar el espacio entre los bordes de la mesa con CSS

Pilar Melgar

Cuando la tabla se crea en HTML, principalmente el CSS "borde"La propiedad se aplica a ella. Dará como resultado una mesa con bordes que tienen espacio entre ellos. En versiones anteriores de HTML, se utilizó el atributo Cellspacing para eliminar ese espacio. Sin embargo, en estos días, el CSS "colapso de fronteras"La propiedad se puede utilizar para el mismo propósito.

Este manual guiará relacionado con:

- Cuál es el "colapso de fronteras"Propiedad CSS?
- ¿Cuáles son los "colapso de fronteras"Valores de propiedad de CSS?
- Cómo colapsar el espacio entre los bordes de la mesa con CSS?

¿Cuál es la propiedad CSS de "colapso fronterizo"??

El CSS "colapso de fronterasSe utiliza la propiedad para ajustar los bordes de la tabla como colapsadas o separadas. Cuando aplicamos la propiedad fronteriza al

, y

elementos, resulta en una tabla que tiene bordes con espacios entre ellos. Para eliminar ese espacio, utilizamos la propiedad CSS "Border-Colapse" con el valor "colapsar".

¿Cuáles son los valores de propiedad de CSS de "colapso fronterizo"??

Los valores asociados con la propiedad mencionada se enumeran a continuación:

- "separado": Este valor agrega espacios entre los bordes de la tabla.
- "colapsar": Este valor elimina los espacios entre los bordes de la tabla.
- "heredar": Este valor establece el valor predeterminado.
- "inicial": Este valor hereda de su padre.

Analice el ejemplo a continuación!

Ejemplo: cómo crear una tabla en HTML?

En HTML, primero, agregue un "

Elemento para crear una tabla. Luego, agregue un elemento de subtítulos. Después de eso, el número de filas se crea utilizando el "" etiqueta. La primera La etiqueta contiene el "

"Etiquetas para encabezados. Otras etiquetas TR sostienen la

Etiquetas para los datos:

Información de los estudiantes
Nombre del estudiante Nombre del Padre Curso Puntaje
John Madera Desarrollo de Java 90
Margarita Guillermo Introducción a C++ 89
Bina Jacobo Introducción a C 79

El resultado del código HTML anterior es el siguiente:

Ahora, agregaremos una propiedad fronteriza y otras propiedades para mejorar el aspecto de la tabla.

Estilo "mesa", "th", "td" elementos

tabla, th, td
Border: 2px Solid #432C7A;
margen: auto;
relleno: 4px;
Font-Family: Verdana, Ginebra, Tahoma, Sans-Serif;

Las siguientes propiedades de CSS se aplican a los elementos Tabla, TH y TD:

- "bordeSe asigna a la propiedad el valor "2px Solid #432C7AQue define el ancho de borde de 2px, el estilo de borde sólido y el color del borde #432C7A.
- "margen"Propiedad con el valor"auto"Indica un espacio igual alrededor del elemento.
- "relleno"Propiedad con el valor"4px"Establece el espacio de 4px alrededor del contenido del elemento o dentro del borde.
- "Familia tipográficaLa propiedad se establece como Verdana, Ginebra, Tahoma y Sans-Serif. La lista de estilos establecidos asegura que si el navegador web no admite el primer valor, se aplicarán otros.

Elemento de "subtítulo" de la tabla de estilo

Tabla de tabla
tamaño de fuente: 20px;

El elemento de subtítulos se aplica con el "tamaño de fuente"Propiedad con el valor 20px.

Se puede observar que las propiedades de estilo CSS se agregan con éxito a la tabla:

Cómo colapsar el espacio entre los bordes de la mesa con CSS?

El CSS "colapso de fronteras"La propiedad se aplica con el valor"colapsar"A los elementos de la tabla, th y TD de la siguiente manera:

Colapso de borde: colapso;

Esta propiedad eliminará el espacio entre los bordes de la tabla de la siguiente manera:

Eso se trataba de eliminar el espacio entre los bordes de la mesa con CSS.

Conclusión

En CSS, el "colapso de fronterasLa propiedad se utiliza para colapsar o separar el espacio fronterizo entre los bordes de la tabla. Esta propiedad se aplica con valores como colapso, separado, inicial o heredado. Cada valor realiza una función diferente. Sin embargo, el "colapsar"El valor elimina el espacio entre los bordes de la tabla. Esta publicación describió cómo eliminar el espacio entre los bordes de la mesa.