Diferenciar las tablas de sus antecedentes ayuda a enfatizar el contenido de la tabla en relación con todo lo demás en la página web. Para agregar un fondo de tabla, deberá realizar cambios en el hoja estilo cascada apoyando su página web.
Empezando
La mejor manera de agregar una imagen de fondo a una tabla es usar CSS antecedentes propiedad. Para prepararse para escribir el CSS de manera efectiva y evitar fallas de visualización inesperadas, abra su imagen de fondo y tome nota de la altura y el ancho. Luego cargue su imagen a su proveedor de alojamiento. Pruebe la URL de la imagen; Una de las razones más comunes por las que las imágenes no se muestran es porque hay un error tipográfico en la URL.
Inserte un bloque de estilo CSS en el encabezado de su documento:
Escriba su CSS para el fondo de su tabla y colóquelo dentro del bloque de estilo:
Coloque su tabla en el HTML:
celda 1 celda 2
celda 1 celda 2
Establezca el ancho y el alto de la mesa para que coincidan con el ancho y el alto de la imagen.
Establezca el ancho y el alto de la mesa para que coincidan con el ancho y el alto de la imagen.
Si el contenido de su tabla es mayor que la altura y el ancho de la imagen, la imagen de fondo solo se mostrará una vez.
Ponga un trasfondo en una sola mesa
Las instrucciones anteriores establecerán la misma imagen de fondo en todas las tablas de la página. Para poner el fondo solo en tablas específicas, use un clase atributo. Añade el claseantecedentes a cualquier mesa que desee tener esa imagen de fondo. Establezca el ancho y el alto de esas tablas.
Deje que la imagen de fondo de la tabla se repita
Es posible que las tablas más grandes o las tablas con más contenido necesiten que se repita el fondo para que se llene toda la tabla. Cambie el valor en su CSS para que la imagen se repita en el eje y, el eje x o en mosaico en ambos.
background: url ("URL a la imagen") repetir;
De forma predeterminada, el valor de repetición se mostrará en mosaico, pero también puede establecer el valor de repetición en.
repetir-x
o.
repetir-y
para enlosar horizontal o verticalmente, respectivamente.
Los colores de fondo de las celdas bloquean la imagen de fondo de la tabla
Cualquier color de fondo las celdas establecidas en la tabla anulan la imagen de fondo de la tabla. Así que tenga cuidado al usar colores de fondo en sus celdas en combinación con imágenes de fondo de tabla.
Consideraciones
Cualquier imagen que utilice debe tener la licencia correspondiente; el hecho de que pueda encontrar una foto en la web no significa que pueda apropiarse de ella para su propio uso. ¡Respete los derechos de autor!
Los fondos de las tablas diferencian sus tablas de la página subyacente. Sin embargo, piénselo dos veces antes de utilizar esta técnica. Es posible que insertar una imagen neutra no distraiga, pero sí imágenes complicadas que pretenden ser lindas (por ejemplo, insertar una imagen de un gatito detrás de una mesa que indica adopciones de mascotas) puede parecer poco profesional y puede afectar la legibilidad de la datos tabulados.