Foros del Web » Creando para Internet » HTML »

¿como "pintar" el fondo de una tabla?

Estas en el tema de ¿como "pintar" el fondo de una tabla? en el foro de HTML en Foros del Web. 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é ...
  #1 (permalink)  
Antiguo 06/02/2003, 12:06
Avatar de BooMeranGz  
Fecha de Ingreso: febrero-2001
Mensajes: 345
Antigüedad: 16 años, 9 meses
Puntos: 0
¿como "pintar" el fondo de una tabla?

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.
  #2 (permalink)  
Antiguo 06/02/2003, 16:02
 
Fecha de Ingreso: enero-2003
Mensajes: 73
Antigüedad: 14 años, 10 meses
Puntos: 0
Añade por ejemplo un linea de código como esta:

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


http://www.jmcweb.org
  #3 (permalink)  
Antiguo 06/02/2003, 17:03
Avatar de BooMeranGz  
Fecha de Ingreso: febrero-2001
Mensajes: 345
Antigüedad: 16 años, 9 meses
Puntos: 0
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?
  #4 (permalink)  
Antiguo 07/02/2003, 14:26
Avatar de hucasys  
Fecha de Ingreso: noviembre-2001
Ubicación: Bastante buena...
Mensajes: 816
Antigüedad: 16 años, 1 mes
Puntos: 3
ufff

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

__________________
La manera en que resuelves el problema, es el problema.
ROBERT FRIPP
  #5 (permalink)  
Antiguo 08/02/2003, 00:17
Avatar de KATHIE  
Fecha de Ingreso: enero-2003
Mensajes: 52
Antigüedad: 14 años, 10 meses
Puntos: 0
una idea

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.
  #6 (permalink)  
Antiguo 17/02/2003, 11:44
Avatar de BooMeranGz  
Fecha de Ingreso: febrero-2001
Mensajes: 345
Antigüedad: 16 años, 9 meses
Puntos: 0
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.
  #7 (permalink)  
Antiguo 17/02/2003, 17:50
Avatar de obi-alf  
Fecha de Ingreso: febrero-2003
Ubicación: Madrid
Mensajes: 119
Antigüedad: 14 años, 10 meses
Puntos: 0
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
__________________
corto!
  #8 (permalink)  
Antiguo 18/02/2003, 07:59
Avatar de hucasys  
Fecha de Ingreso: noviembre-2001
Ubicación: Bastante buena...
Mensajes: 816
Antigüedad: 16 años, 1 mes
Puntos: 3
lástima

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

__________________
La manera en que resuelves el problema, es el problema.
ROBERT FRIPP
  #9 (permalink)  
Antiguo 18/02/2003, 10:00
Avatar de BooMeranGz  
Fecha de Ingreso: febrero-2001
Mensajes: 345
Antigüedad: 16 años, 9 meses
Puntos: 0
De acuerdo

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.
  #10 (permalink)  
Antiguo 18/02/2003, 10:30
Avatar de hucasys  
Fecha de Ingreso: noviembre-2001
Ubicación: Bastante buena...
Mensajes: 816
Antigüedad: 16 años, 1 mes
Puntos: 3
checkeo opera netscape IE

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.
__________________
La manera en que resuelves el problema, es el problema.
ROBERT FRIPP
  #11 (permalink)  
Antiguo 12/03/2003, 08:04
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:46.