Introducción al estilo de tabla CSS
Por qué usamos CSS, aunque podemos usar tablas HTML, es porque, en la tabla HTML, un diseño de página basado en tablas a menudo se procesa más lentamente que un diseño basado en CSS equivalente; Esto es especialmente cierto en las páginas que tienen mucho contenido. Las tablas no deben usarse como ayudas de diseño. Y si creamos tablas HTML sin ningún estilo o atributo en el navegador, se mostrará sin ningún borde. Diseñar una tabla con CSS puede mejorar su apariencia.
Las tablas CSS son bastante simples de entender y usar. Es solo cuestión de recordar los valores de propiedad de visualización CSS correspondientes para los elementos básicos de la tabla HTML. Con la ayuda de CSS, somos capaces de hacer algunas tablas con estilo.
¿Qué es el estilo de tabla CSS?
Una tabla CSS (Hojas de estilo en cascada) describe cómo diseñar un conjunto de elementos en filas y columnas. El CSS predeterminado aplicado a una tabla HTML es una tabla CSS.
- CSS ha diseñado y rediseñado la flexibilidad.
- Significa que un diseño basado en CSS garantiza que coloque todos sus estilos (es decir, desde pequeños cambios hasta las reglas principales) en una ubicación.
- Al cambiar las reglas de diseño que establece en esa hoja de estilo, y afecta a cada página que se refiere a ella.
- El diseño de página basado en CSS generalmente aparecerá más rápido en la pantalla e incluso la descarga será más rápida que el diseño basado en tablas.
Propiedades de estilo de tabla CSS
A continuación se muestran las diferentes propiedades de los estilos de tabla CSS:
1. colapso de la frontera
Se utiliza para indicar si los bordes alrededor de las celdas de una tabla se deben separar o contraer.
Sintaxis: border-collapse: separate|collapse|initial|inherit;
- Colapso del borde : separado: se usa para que las celdas adyacentes tengan sus propios bordes independientes que no se comparten.
Sintaxis
border-collapse: separate;
El valor predeterminado que se establece en la propiedad border-collapse es independiente. Cuando se separan, los navegadores colocan un espacio de un par de píxeles entre cada celda utilizando la propiedad de espacio entre bordes.
Código
Salida:
- Border collapse: collapse: cada vez que configuramos la propiedad border-collapse para colapsar, elimina el espacio entre las celdas.
Sintaxis
border-collapse: collapse;
Código
Salida:
Incluso si elimina este espacio estableciendo el atributo de espacio de celdas para la etiqueta HTML en 0, los navegadores aún muestran bordes dobles. Es decir, el borde inferior de una celda aparecerá sobre el borde superior de la celda inferior, causando una duplicación de los límites. Establecer la propiedad de colapso del borde en colapso elimina tanto el espacio entre las celdas como esta duplicación de los límites.
- Colapso del borde : inicial: se utiliza para establecer la propiedad de colapso del borde a su valor predeterminado.
- Colapso de borde : heredar: se utiliza cuando la propiedad de colapso de borde hereda de sus elementos principales. Esta propiedad solo funciona cuando se aplica a un
etiqueta.
Valores: colapso, separado, inicial, heredar;
2. Espaciado de borde
Establece los bordes adyacentes del espacio y el contenido que rodea la tabla. Es similar al espacio de celdas de la etiqueta
atributo, excepto que tiene un segundo valor opcional. Esta propiedad solo funciona cuando se aplica a un
etiqueta.
Sintaxis
border-spacing: Length|initial|inherit;El espacio entre bordes generalmente toma uno o dos valores de longitud. En este solo se especifica un valor y luego define tanto el espacio horizontal como el vertical entre celdas.
Código
Salida:
En este caso, si se especifican dos valores, el primer valor define el espaciado horizontal entre celdas (el espacio a cada lado de cada celda) y el segundo valor define el espaciado vertical entre celdas. (el espacio que separa la parte inferior de una celda de la parte superior de la que está debajo).
3. Subtítulo
La propiedad del lado del título especifica la ubicación de un título de tabla. Cuando se aplica a un título de tabla, esta propiedad determina si el título aparece en la parte superior o inferior de la tabla. Un título aparecerá normalmente en la parte superior de la tabla.
Sintaxis
caption-side: top|bottom|initial|inherit;Esta propiedad puede tener uno de los cuatro valores:
- Título: arriba: es el valor predeterminado. En esto, coloca el título sobre la tabla.
Sintaxis:
caption-side:top;Código
Salida:
- Caption-side: bottom: coloca el subtítulo debajo de la tabla.
Sintaxis:
caption-side:bottom;Código
Salida:
- Caption-side: initial: se utiliza para establecer la propiedad en su valor predeterminado.
- Subtítulo: heredar: Hereda esta propiedad de su elemento padre.
Valores: superior, inferior, inicial, heredar;
4. Celdas vacías
Le dice al navegador si debe mostrar una celda de tabla que esté completamente vacía. Controla la representación de los bordes y el fondo de las celdas que no tienen contenido visible en una tabla que usa el modelo de bordes separados.
Sintaxis:
empty-cells: show|hide|initial|inherit;Esta propiedad puede tener uno de los cuatro valores:
- Empty-cell: show: esta propiedad se utiliza para mostrar los bordes en la celda vacía.
Sintaxis:
empty-cells:show;Código
Salida:
- Empty-cell: hide: esta propiedad se utiliza para ocultar los bordes en la celda vacía.
Sintaxis:
empty-cells: hide;Código
Salida:
- Celda vacía: inicial : se utiliza para establecer la propiedad en su valor predeterminado.
- Celda vacía: heredar: Hereda esta propiedad de su elemento padre.
Valores: mostrar, ocultar, inicial, heredar;
5. Diseño de tabla
Controla cómo un navegador web dibuja una tabla y puede afectar ligeramente la velocidad a la que el navegador lo muestra. Esta propiedad puede tener uno de los cuatro valores.
Sintaxis:
table-layout: auto|fixed|initial|inherit;La propiedad predeterminada es auto.
1. Diseño de tabla: automático: el automático hace que el ancho de los elementos se ajuste automáticamente para adaptarse al contenido.
2. Tabla - diseño: fijo : la configuración fija obliga al navegador a representar todas las columnas del mismo ancho que las columnas de la primera fila. Si el contenido se amplía más que la primera fila, el contenido se envolverá, se cortará o se extenderá fuera de las celdas.
Código
Salida:
3. Diseño de tabla: inicial: se utiliza para establecer la propiedad en su valor predeterminado.
4. Diseño de tabla: heredar: Hereda esta propiedad de su elemento padre.
Conclusión
Con la ayuda de CSS, podemos hacer tablas con estilo y podemos mejorar la apariencia de la tabla.
Artículos recomendados
Esta es una guía para el diseño de tablas CSS. Aquí discutimos propiedades con códigos, salidas y sintaxis del estilo de tabla CSS. También puede consultar nuestros artículos para obtener más información:
- Ventajas de CSS
- Usos de CSS
- Introducción a CSS
- Formato de texto CSS