Configuración de una imagen como fondo para una tabla en una página web

Configuración de una imagen como fondo para una tabla en una página web

Configuración de una imagen como fondo para una tabla en una página web

VALORACIÓN DEL ARTÍCULO:
5/5


Diferenciar 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 añadir un fondo de tabla, necesitará ajustar la hoja de estilo en cascada (CSS) que soporta su página web.

Introducción

La mejor manera de añadir una imagen de fondo a una tabla es usar el CSS

Antecedentes

de la propiedad. Para prepararse para escribir el CSS de manera efectiva y evitar problemas inesperados de visualización, abra la imagen de fondo y tome nota de la altura y el ancho. A continuación, cargue su imagen a su proveedor de alojamiento. Pruebe la URL para 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 que haya terminado ese paso, coloque un bloque de estilo CSS en la cabecera del documento:

  
  1. Escribe tu CSS para el fondo de tu tabla y ponlo dentro del bloque de estilo:
    table { background: url(" URL to image") no-repeat; } 

    >

    1. Coloque su tabla en el HTML:
    2. cell 1
    3. cell 2
    4. cell 1
    5. cell 2
  2. Configurar la anchura y la altura de la tabla para que coincida con la anchura y la altura de la imagen...

Si el contenido de su tabla es mayor que la altura y el ancho de la imagen, la imagen de fondo sólo se mostrará una vez.

Poner un fondo en una sola tabla

Las instrucciones anteriores establecerán la misma imagen de fondo en cada tabla de la página. Si quiere poner el fondo sólo en tablas específicas, necesita usar un

Clase

clase
  1. Cambie su CSS a read:
    table.background { background: url(" URL to image") no-repeat; } 
  2. Añada la clase background a cualquier tabla que desee tener esa imagen de fondo. Establezca el ancho y la altura de esas tablas.
    Por defecto, el valor de repetición será mosaico, pero también puede establecer el valor de repetición en

    repeat-x

    o

    repeat-y

    para alicatar horizontal o verticalmente, respectivamente.

    Colores de fondo de celda Bloquean la imagen de fondo de la tabla

    Cualquier color de fondo establecido en las celdas de la tabla anulará la imagen de fondo de la tabla. Así que tenga cuidado cuando use colores de fondo en sus celdas en combinación con imágenes de fondo de tabla.

    Consideraciones

    Los fondos de tabla separarán sus tablas de la página subyacente. Sin embargo, piénselo dos veces antes de usar esta técnica. Insertar una imagen neutra puede no distraer, pero las imágenes complicadas con la intención de ser lindas (por ejemplo, insertar una imagen de un gatito detrás de una mesa indicando adopciones de mascotas) puede parecer poco profesional y puede afectar la legibilidad de los datos tabulares.

    Cualquier imagen que utilice debe tener la licencia adecuada; el hecho de que pueda encontrar una foto en la Web no significa que pueda apropiarse de ella para su propio uso. Respetar los derechos de autor!

Deja un comentario

TAMBIÉN TE INTERESA

OPPO-Reno8-5G

Ya a la venta los nuevos teléfonos OPPO Reno8

OPPO Reno8 es una realidad ya en Europa. La marca hizo una presentación en París para dar a conocer los nuevos productos que llegan directamente al mercado para sumar una feroz competencia. Y es que en pocos años en el mercado del viejo continente, OPPO se ha hecho un hueco importante en el consumidor.  

batería-portátil-DELTA-2

Esta batería portátil es top y acaba de salir a la venta

Tener una batería portátil puede darnos mucha versatilidad para nuestras actividades tanto dentro como fuera de casa. Usamos muchos dispositivos a diario y todos ellos requiere de energía eléctrica para trabajar, por lo que una herramienta que nos aporte dicha energía puede venirnos muy bien en caso de apagones o proyectos en el exterior. EcoFlow,

GoPro-HERO11

GoPro HERO11 Black: las nuevas cámaras para los creadores de contenido

La conocida marca de videocámaras GoPro ha lanzando tres nuevas especialmente concebidas para creadores. GoPro HERO11 llega en tres modelos para satisfacer las necesidades de todo tipo de perfiles y creadores de contenidos.   Índice de contenidos1 El sensor de mayor resolución hasta la fecha2 Las tres cámaras GoPro HERO112.1 Principales tecnologías en las tres

camara-motorola-edge-30-ultra

¿200 megapíxeles? Sí, es lo que tiene el nuevo motorola edge 30 ultra

El furor por los megapíxeles parece estar de vuelta en la fotografía de los smartphones, si bien hay expertos que mantienen que más MP no quiere decir que resulte en mejores fotografías. El nuevo motorola edge Ultra llega al mercado con una barbaridad inédita en el mundo de la telefonía. Cabe destacar también que otras

nuevo-apple-watch-ultra

Un reloj inteligente solo para los elegidos: Apple Watch Ultra

Apple ha lanzado en septiembre su apuesta más Premium en relojes inteligentes: el nuevo Apple Watch Ultra. Este nuevo dispositivo rompe con la línea de los anteriores, especialmente en lo que se refiere a la pantalla, e incluye prestaciones para deportes extremos. Sin duda es el reloj más ambicioso de su sector, tanto por lo