Fondo de tabla en degradé sin pictures

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

Hola,

Pregunta similar he posteado en HTML, pero no parece haber respuesta, así que probaré aquí con los magos de javascript ;)

¿como "pintar" el fondo de una tabla?

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.

furoya · #2 (**permalink**) 09/02/2003, 15:10

Sí y no.

Existen un par de trucos para dibujar o colorear fondos sin imágenes, pero ésto no significa que sean prácticos de usar.

Aquí van dos con CSS:

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>

<p> </p>

<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>

<p> </p>

</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><p> </p>

Este código lo encontré en : <a 
href="http://javascriptkit.com/script/script2/colorbar.htm"> 
colorbar</a>.

</BODY> 
</HTML>

█▓▒░ PD : ¿y por qué sin imágenes?. ░▒▓█

BooMeranGz · #3 (**permalink**) 17/02/2003, 11:52

Gracias, los voy a probar...

¿porqué sin imagenes?

Simple, para poder variar ancho y alto de las tablas y no tener que modificar los fondos, eso por un lado y por otro para la compatibilidad en los navegadores, ya que si se usa un fondo con un un tipo de letra por ej. en IE, luego si lo ves en otros muchas veces el font no es del mismo tamaño (aunque usemos css) y hace que la tabla varíe de forma que las imagenes quedan muy mal.

Salu2.

furoya · #4 (**permalink**) 12/03/2003, 07:49

Ah...

¿Y no era más fácil preguntar cómo se ajusta el fondo de la tabla con una imagen...?. No es que haya un método eficaz, pero de haber preguntado ésto en el foro de HTML, seguro te hubieran pasado algún truco.

Pero como estamos en el foro de Javascript:

Código:

<html> 
<head> 
<title> AJUSTA IMAGEN.</title> 
<SCRIPT>
<!-- 
function tam(){
if(document.all){tabla.style.fontSize=fuenteT.value+'pt';
tabla.style.fontFamily=fuenteF.value;
tabla.style.lineHeight=fuenteE.value;
alto=tabla.offsetHeight;
ancho=tabla.offsetWidth;
imagen.style.height=alto;
imagen.style.width=ancho;
imagen.style.top=-alto;}
}
// --> 
</SCRIPT> 
</HEAD> 
<BODY onload=tam()>
<H2>La imagen se ajusta al tamaño de la tabla.</H2>
Cambiá el formato del texto y hacé <i>click</i> en <b>Ver</b>.<p>

Tamaño : <input size=3 name=fuenteT value="16">pt ; 
Familia : <select name="fuenteF"> 
<option value="monospace">monospace
<option selected value="serif">serif
<option value="sans-serif">sans-serif
<option value="fantasy">fantasy
</select> ; 
Espaciado : <input size=3 name=fuenteE value="1"> ; 
&nbsp; <button onmouseup=tam()>Ver</button><p>

<table id=tabla style="display:inline;color:#aa4400" border=1>
<td><b>qwertyuiop <br>QWERTYUIOPQWERTYUIOPQWERTYUIOP<br>
asdfghjklñ</b></td>
</table><br>
<img border=1 id=imagen style="position:relative;z-index:-1;" 
src="http://www.forosdelweb.com/images/a/logo_header.gif" ><br>

<b>NOTA</b> : Tampoco estoy seguro de que funcione fuera del <b>IE</b>.
</BODY> 
</HTML>

Perdón por haber demorado tanto en leer tu mensaje. Es que no me conecto muy seguido.