¿como "pintar" el fondo de una tabla?

BooMeranGz · #1 (**permalink**) 06/02/2003, 12:06

Hola,

Normalmente para darle algun formato de fondo debo usar gifs, jpgs, etc.

Pero, ¿es posible darle por ejemplo un color de fondo en degradé a una tabla html, ya sea con algun tag, javascript, css, o lo que sea?

Salu2.

jose199 · #2 (**permalink**) 06/02/2003, 16:02

Añade por ejemplo un linea de código como esta:

<table bgcolor="#00CCCC" width="400">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>

http://www.jmcweb.org

BooMeranGz · #3 (**permalink**) 06/02/2003, 17:03

No no no, me refiero a que el fondo tenga "más de 1 color", por ejemplo que vaya en degradé desde el "#ffffff" al "#000000".

¿Comprendes?

hucasys · #4 (**permalink**) 07/02/2003, 14:26

No creo que se pueda....tendrías que usar una img y sería algo pesada, no?

KATHIE · #5 (**permalink**) 08/02/2003, 00:17

a ver!!!!!

una imagen en :

<table background="fondo_tabla.gif" width="200" height="100">

para que la imagen de fondo no pese mucho y tenga una variación de color o valor:

por ejemplo hacer un fondo de 20 px de ancho y 100 px de alto
y que este en degrade hacia abajo, asi se repite hacia el lado hasta completar la superficie de la tabla. es como una linea ancha y listo.

BooMeranGz · #6 (**permalink**) 17/02/2003, 11:44

claro, pero es lo mismo de siempre, ¿que pasa si la tabla es mas alta?, se repite mal el fondo.

O sea, lo que busco es que se pueda "pintar", pero que además no se "desajuste" el fondo si varía el tamaño (sobre el ancho no hay problema, el tema es siempre sobre el alto).

Salu2.

obi-alf · #7 (**permalink**) 17/02/2003, 17:50

Aqui te paso una web donde explican como hacer diferentes degradados en html
http://www.xlwebmasters.com/doc3.php?id=639&doc=htm22
Espero que te sirva

Saludos

hucasys · #8 (**permalink**) 18/02/2003, 07:59

Interesantísimo, lástima que sólo sea para IE.

BooMeranGz · #9 (**permalink**) 18/02/2003, 10:00

Gracias por sus sugerencias, sabía que se podía, ahora es cuestión de ver como se compatibiliza con otros navegadores, seguramente se puede.

Les dejo un code que me pasaron en la seccíón de javascript, esta muy bien:

Código:

<HTML> 
<HEAD> 
<TITLE> FONDOS DEGRADÉ 1.</TITLE> 
<STYLE>
<!--
.abs{position:absolute}
// -->
</STYLE>
</HEAD> 

<BODY >
<table style='margin:0px' height=200 width=290 
border=1 align=center cellpadding=10> 

<div class=abs style="z-index:-10; 
filter:alpha(style=1); 
height:200px; width:290px; background:orange"> 
</div> 
<td>Con filtro <tt>alpha</tt>. 
<h1>QWERTYUIOP</h1> 
Sólo para <b>IE4+</b></td> 
</table>

<table style='margin:0px' height=270 width=290 
border=1 align=center cellpadding=10> 

<div class=abs style="z-index:-10; font:8px; 
overflow:hidden; width:290px; height:270px; 
letter-spacing:150px; background:#000000">
<pre><font style="background:#0000ff">  </font>
<font style="background:#0000ff">  </font>
<font style="background:#0000f7">  </font>
<font style="background:#0000f0">  </font>
<font style="background:#0000e7">  </font>
<font style="background:#0000e0">  </font>
<font style="background:#0000d7">  </font>
<font style="background:#0000d0">  </font>
<font style="background:#0000c7">  </font>
<font style="background:#0000c0">  </font>
<font style="background:#0000b7">  </font>
<font style="background:#0000b0">  </font>
<font style="background:#0000a7">  </font>
<font style="background:#0000a0">  </font>
<font style="background:#000097">  </font>
<font style="background:#000090">  </font>
<font style="background:#000087">  </font>
<font style="background:#000080">  </font>
<font style="background:#000077">  </font>
<font style="background:#000070">  </font>
<font style="background:#000067">  </font>
<font style="background:#000060">  </font>
<font style="background:#000057">  </font>
<font style="background:#000050">  </font>
<font style="background:#000047">  </font>
<font style="background:#000040">  </font>
<font style="background:#000037">  </font>
<font style="background:#000030">  </font>
<font style="background:#000027">  </font>
<font style="background:#000020">  </font>
<font style="background:#000017">  </font>
<font style="background:#000010">  </font>
<font style="background:#000007">  </font></pre> 
</div> 
<td style="color:white"><b>Con <tt>font 
style="background:..."</tt>. 
<h1>QWERTYUIOP</h1> 
Éste funciona en todos?.</b></td> 
</table>
</BODY> 
</HTML>

Y ya que estamos en el foro de JavaScript :

Código:

<HTML> 
<HEAD> 
<TITLE> FONDO DEGRADÉ 2.</TITLE> 
</HEAD> 
<BODY>

<SCRIPT language=JavaScript>
 clr=new Array('00','11','22','33','44','55','66',
 '77','88','99','aa','bb','cc','dd','ee','ff');

/* AQUÍ COMIENZA LA TABLA DE COLORES */ 
 document.write
("<table border=0 cellpadding=0 cellspacing=0 class=p1>");
 document.write("<tr height=20>");
 var red=15;
 var green=0;
 var blue=0;
 for (green=0;green<16;green++) { 
 document.write('<td width=3  bgcolor="#'+clr[red]+clr[green]+clr[blue]+'"></td>'); 
 }
 green=15;
 blue=0;
 red=15;
 for (red=15;red>-1;red--) { 
 document.write('<td width=3  bgcolor="#'+clr[red]+clr[green]+clr[blue]+'"></td>'); 
 }
 green=15;
 blue=0;
 red=0;
 for (blue=0;blue<16;blue++) { 
 document.write('<td width=3  bgcolor="#'+clr[red]+clr[green]+clr[blue]+'"></td>'); 
 }
 
 green=15;
 blue=15;
 red=0;
 for (green=15;green>-1;green--) { 
 document.write('<td width=3  bgcolor="#'+clr[red]+clr[green]+clr[blue]+'"></td>'); 
 }
 green=0;
 blue=15;
 red=0;
 for (red=0;red<16;red++) { 
 document.write('<td width=3  bgcolor="#'+clr[red]+clr[green]+clr[blue]+'"></td>'); 
 }
 green=0;
 blue=15;
 red=15;
 for (blue=15;blue>-1;blue--) { 
 document.write('<td width=3  bgcolor="#'+clr[red]+clr[green]+clr[blue]+'"></td>'); 
 }
 document.write("</tr>");
 document.write("</table>"); 
/* AQUÍ TERMINA LA TABLA DE COLORES */

/* AQUÍ COMIENZA LA TABLA DE GRISES */ 
 document.write
("<table border=0 cellpadding=0 cellspacing=0 class=p2>");
 document.write("<tr height=20>");
 for (i=15;i>-1;i--) { 
 document.write
('<td width=8  bgcolor="#'+clr[i]+clr[i]+clr[i]+'"></td>'); 
 }
 document.write("</tr>");
 document.write("</table>"); 
/* AQUÍ TERMINA LA TABLA DE GRISES */
</SCRIPT>
Este código lo encontré en : <a 
href="http://javascriptkit.com/script/script2/colorbar.htm"> 
colorbar</a>.
</BODY> 
</HTML>

Bueno, si alguien encuentra algo más, esperelo lo postee, a ver si lo podemos usar para otros navegadores :)

Salu2.

hucasys · #10 (**permalink**) 18/02/2003, 10:30

ambos códigos funcionan en IE (lógico).

el primero no funciona ni en Opera7 ni en Netscape 6

y el segundo sí funciona en Opera7, pero en netscape6 aunque se ve el degradado sólo se ven dos líneas muy delgadas y no como barras, me imagino que no es difícil arreglarlo.

eso.

furoya · #11 (**permalink**) 12/03/2003, 08:04

Hola BooMeranGz

Por fin encontré tu mensaje en el foro HTML.
Ahora tengo un poco más claro cual es tu problema, pero supongo que después de tanto tiempo ya lo habrás solucionado.

De todas formas, te dejé otro 'code' junto con el anterior, sólo a modo de muestra.

http://www.forosdelweb.com/showthrea...hreadid=115260

Mucha suerte con tus tablas.