La diferenciación de las tablas de sus fondos 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á ajustar la hoja de estilo en cascada (CSS) que admite su página web.
Empezando
La mejor manera de agregar una imagen de fondo a una tabla es usar el CSS
fondo
propiedad. Para prepararse para escribir el CSS de manera efectiva y para evitar problemas de visualización inesperados, abra su imagen de fondo y tome nota de la altura y el ancho. Luego sube tu imagen a tu proveedor de hosting. Prueba 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. Después de haber finalizado ese paso, coloque un bloque de estilo CSS en el encabezado de su documento:
tabla {fondo: url (" URL a la imagen ") no-repetir;} Establezca el ancho y el alto de la tabla para que coincida con el ancho y el alto de la imagen. Si el contenido de su tabla es más grande que el alto y el ancho de la imagen, la imagen de fondo solo se mostrará una vez. Las instrucciones anteriores establecerán la misma imagen de fondo en todas las tablas de la página. Si desea poner el fondo solo en tablas específicas, necesita usar un clase
table.background {background: url (" URL a la imagen ") no-repetir;} Es posible que las tablas más grandes, o tablas con más contenido, deban repetir 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, en el eje x, o en mosaico en ambos. fondo: url ("URL a imagen") repetir;
Por defecto, el valor de repetición se archivará, pero también puede establecer el valor de repetición en repetir-x
o repetir y Cualquier color de fondo establecido en las celdas de la tabla anulará 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 la tabla. Los fondos de la tabla diferenciarán tus tablas de la página subyacente. Sin embargo, piense dos veces antes de usar esta técnica. La inserción de una imagen neutral puede no distraer, pero las imágenes complicadas que pretenden ser lindas (por ejemplo, insertar una imagen de un gatito detrás de una mesa que indica la adopción de mascotas) pueden parecer poco profesionales y pueden afectar la legibilidad de los datos tabulares. Cualquier imagen que uses debe tener una licencia adecuada; el hecho de que pueda encontrar una foto en la Web no significa que pueda utilizarla para su propio uso. ¡Respete los derechos de autor!
celda 1 celda 2 celda 1 celda 2 …
Poner un fondo en una sola mesa
class = "background" style = "width: 400px; height: 500px;>…
Deje que la tabla repita la imagen de fondo
azulejo horizontal o vertical, respectivamente.
Los colores de fondo de la celda bloquean la imagen de fondo de la tabla
Consideraciones
