Infomed
Inicio›› Diseño de tablas con fondo gráfico››

Diseño de tablas con fondo gráfico

[Versión para imprimir][Recomendar a otros][Versión PDF]

Diseño de tablas en HTML con fondo gráfico de papel tapiz.

Para lograr un fondo de imagen que se repite, es decir que se hace extendible a un espacio como un papel tapiz,  que sirva para luego colocar texto encima, así como imágenes, les propongo utilizar estos códigos en HTML.

Basta con copiar el código debajo y donde dice <td background="PONER LA DIRECCION DE LA IMAGEN DE PLANTILLA DE FONDO"> y pegar el código en la página que esté elaborando.

En el caso de with="100%" , se refiere a que la tabla asuma el 100% del ancho de la página, lo cual puede ser cambiado a la mitad 50% o darle un valor en pixeles, por ejemplo "485" (sin poner%).

Si se coloca border=0 el borde no se visualizará.

 CODIGO:

<table align="center" width="100%" cellspacing="1" cellpadding="1" border="1">
    <tbody background="/sites/uvsfajardo.sld.cu/files/imagenes/fondo_rompekbeza.jpg">
        <tr>
            <td>
            <p>&nbsp;<span style="color: rgb(0, 0, 128);"><br />
            </span></p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            </td>
        </tr>
    </tbody>
</table>

 

 Para los siguientes ejemplos ponemos la URL de la imagen que sirvió de fondo:

 

 

ESTA ES UNA TABLA DISEÑADA EN HTML CON FONDO EXTENSIBLE A PARTIR DE UNA IMAGEN, ENCIMA SE PUEDE COLOCAR TEXTO Y OTRA IMAGEN

 

 Referencia del fondo:     "/sites/uvsfajardo.sld.cu/files/imagenes/fondo_azulc1.gif"

   LIBROS

 Referencia del fondo: "/sites/uvsfajardo.sld.cu/files/imagenes/fondo_globo.gif"

 

Otro ejemplo con fondo 

 

 Referencia del fondo: "/sites/uvsfajardo.sld.cu/files/imagenes/fondo_uvsf.jpg"

 

ESTA ES UNA TABLA DISEÑADA EN HTML CON FONDO EXTENSIBLE A PARTIR DE UNA IMAGEN, ENCIMA SE PUEDE COLOCAR TEXTO Y OTRA IMAGEN

 

  Referencia del fondo:  "/sites/uvsfajardo.sld.cu/files/imagenes/fondo_pared_ladrillo.jpg"

 

PARED DE LADRILLO

 

 Referencia del fondo: "/sites/uvsfajardo.sld.cu/files/imagenes/fondo_rompekbeza.jpg"

 

 Como un rompecabezas

 

 Referencia del fondo: "/sites/uvsfajardo.sld.cu/files/imagenes/fondo_rosa.gif "

 

 

 

 Referencia del fondo: 

  • [Versión para imprimir]
  • [Recomendar a otros]
  • [Versión PDF]