Imagen de fondo en las filas de una tabla

tag:blogger.com,1999:blog-6864629.post-1142918831265065382006-03-21T00:53:00.000-04:002006-03-22T22:32:14.650-04:00Imagen de fondo en las filas de una tablaColocar una imagen de fondo en la fila de una tabla es una tarea engorrosa porque todos (Firefox 1.5, Internet Explorer 6 y Opera 8.2) los navegadores se comportan de diferente forma. A continuación se expondrá el problema y una solución. Problemática Para analizar el comportamiento de los tres navegadores se usará un simple archivo HTML con una tabla compuesta por una cabecera (thead) y un cuerpo (tbody). En la fila de la cabecera se pone una imagen de fondo, según la especificación CSS2 (REC-CSS2-19980512:http://www.w3.org/TR/REC-CSS2/cover.html), usando la propiedad 'background-image', como se muestra en el siguiente código: <pre> <html> <body> <h1>Imagen de fondo en filas de tablas</h1> <table width="150px" cellpadding="0" cellspacing="0" border="0"> <thead> <tr style="background-image: url(background.gif);"> <th>Firefox</th> <th>Internet Explorer</th> <th>Opera</th> </tr> </thead> <tbody> <tr> <td>Mozilla fundation</td> <td>Microsoft Corporation</td> <td>Opera Software</td> </tr> </tbody> </table> </body> </html></pre> Comportamiento esperado La especificación CSS2 dice claramente que las propiedades de fondo no deben ser heredadas: <blockquote>Background properties are not inherited, but the parent box's background will shine through by default because of the initial 'transparent' value on 'background-color'.</blockquote> Al especificar una imagen de fondo en la fila se espera que esta se vea en su totalidad a través de las celdas, siempre y cuando estas no especifiquen ningun color de fondo. El resultado esperado es el siguiente: <div style="text-align: center;"><img src="http://static.flickr.com/56/116224767_315549b8b8_o.jpg" style="margin: 5px;" /> </div>Comportamiento real Estos pantallazos muestran el comportamiento de cada nevegador. <div style="text-align: center;"><img src="http://static.flickr.com/46/116231973_fc8e021a8a_o.jpg" style="margin: 5px;" title="Firefox 1.5" /> </div><div style="text-align: center;"><img src="http://static.flickr.com/46/116231974_39971ae453_o.jpg" style="margin: 5px;" title="Internet Explorer 6" /> </div><div style="text-align: center;"><img src="http://static.flickr.com/55/116231975_be31b87e20_o.jpg" style="margin: 5px;" title="Opera 8.2" /> </div> Firefox es el único que entrega el resultado esperado, mostrando la imagen en todo el fondo de la fila. Internet Explorer y Opera muestran un comportamiento similiar, en que cada celda hereda la imagen de fondo de la fila, por lo que se obtiene ese efecto de repetición de la imagen en cada celda en vez de una sola imagen de fondo en la fila. Además del caso de estudio se realizaron más pruebas con distintas combinaciones de estilos y ubicaciones de estos. Ejemplo: <pre>[...] <thead> <tr style="bakcground-image: url(background.gif);"> <th>Firefox</th>  <th style="background-position: 50% 0%;">Internet Explorer</th> <th>Opera</th> </tr> </thead> [...] </pre><div style="text-align: center;"><img src="http://static.flickr.com/46/116231973_fc8e021a8a_o.jpg" style="margin: 5px;" title="Firefox 1.5" /> </div>Firefox no se muestra fectado por la aplicación de 'background-position' en una celda, lo que confirma que efectivamente las celdas no heredan el fondo de la fila. <div style="text-align: center;"><img src="http://static.flickr.com/55/116402996_ab4fdacdae_o.jpg" style="margin: 5px;" title="Internet Explorer 6" /> </div> En Internet Explorer cada celda hereda el atributo 'background-image', esto se confirmó al aplicar un 'background-position' a la celda, que resultó en un desplazamiento de la imagen en la celda. <div style="text-align: center;"><img src="http://static.flickr.com/55/116231975_be31b87e20_o.jpg" style="margin: 5px;" title="Opera 8.2" /> </div> Opera por su parte se comporta de otra forma, si bien parece que las celdas heredan la imagen de fondo, esto es solo un efecto visual e internamente las celdas no tienen imagen de fondo. Esto se verificó aplicando 'background-image' a las celda sin obtener algún efecto. Por lo tanto Internet Explorer 6 y Opera 8.2 no se están comportando de acuerdo a la especificación CSS2. Solución (workaround) La solución debe ser simple, no intrusiva, sin necesidad de despedazar la imagen y no debe tener efectos secundarios en Firefox. Dependiendo de la compatibilidad entre navegadores que se quiera, existen dos posibles soluciones: Compatibilidad con Firefox e Internet Explorer. Dado que en Internet Explorer las celdas heredan el atributo 'background-image' de la fila, para lograr una imagen continuada en el fondo, basta con especificar adecuadamente el atributo 'background-image' en cada celda de la fila. 'background-image' acepta distintos formatos, aquí solo se usarán dos de ellos: <porcentaje> <porcentaje> y <distancia> <distancia>; el uso de uno u otro formato depende principalmente de la imagen de fondo. Para una imagen sin trama o formas, el formato porcentual es más que suficiente, pero para una imagen con tramas o textos que deben aparecer en ubicaciones especificas de la fila es necesario el uso del formato <distancia> <distancia> para obtener un posicionamiento preciso. Formato <porcentual> <pre>[...] <thead> <tr style="bakcground-image: url(background.gif);"> <th style="background-position: 0% 0%;">Firefox</th> <th style="background-position: 50% 0%;">Internet Explorer</th> <th style="background-position: 100% 0%;">Opera</th> </tr> </thead> [...] </pre>Formato <distancia> <pre>[...] <thead> <tr style="bakcground-image: url(background.gif);"> <th style="background-position: 0px px;">Firefox</th> <th style="background-position: -50px 0px;">Internet Explorer</th> <th style="background-position: -100px 0px;">Opera</th> </tr> </thead> [...] </pre><div style="text-align: center;"><img src="http://static.flickr.com/54/116407328_1f576e87db_o.jpg" style="margin: 5px;" title="Solución para FF e IE" /> </div> Compatibilidad con Firefox, Internet Explorer y Opera. Para que funcione en Opera es necesario especificar la imagen de fondo en cada celda además de especificar 'background-position'. Esto porque en Opera las celdas no heredan el atributo 'background-image' por lo que 'background-position' por si solo no tendría algún efecto. Esta solución tambien funciona en Internet Explorer y Firefox. Formato <porcentual> <pre>[...] <thead> <tr><-- aquí se quitó la propiedad 'background-image' de la fila--> <th style="bakcground-image: url(background.gif); background-position: 0% 0%;">Firefox</th> <th style="bakcground-image: url(background.gif); background-position: 50% 0%;">Internet Explorer</th> <th style="bakcground-image: url(background.gif); background-position: 100% 0%;">Opera</th> </tr> </thead> [...] </pre>Formato <distancia> <pre>[...] <thead> <tr><-- aquí se quitó la propiedad 'background-image' de la fila--> <th style="bakcground-image: url(background.gif); background-position: 0px px;">Firefox</th> <th style="bakcground-image: url(background.gif); background-position: -50px 0px;">Internet Explorer</th> <th style="bakcground-image: url(background.gif); background-position: -100px 0px;">Opera</th> </tr> </thead> [...] </pre><div style="text-align: center;"><img src="http://static.flickr.com/36/116406397_20a50da08d_o.jpg" style="margin: 5px;" title="Solución para FF, IE y Opera" /> </div> Ambas soluciones no usan nada fuera de HTML y CSS; son simples, no se necesita seccionar ninguna imagen y funcionan correctamente en Firefox. Pero son un poco intrusivas porque agregan bastante código que es incomodo de mantener y si además en una página se tienen muchas tablas con distintas imagenes de fondo o tablas generadas dinámicamente, se vuelve un poco engorroso configurar apropiadamente los parametros en cada celda. Por esto escribí una función en javascript que se encarga de configurar todo lo necesario para que la imagen de fondo aparezca correctamente en los tres navegadores. <pre> function setTableRowBackgroundImagePosition(table){ var all_tablesRows; if (table) all_tablesRows = table.getElementsByTagName("tr"); else all_tablesRows = document.getElementsByTagName("tr"); for (var i = 0; i < all_tablesRows.length; i++){ if(all_tablesRows[i].style.backgroundImage == '') continue;//No background-image here, go on. var cells = all_tablesRows[i].cells; var previousWidth = 0; for (var j = 0; j < cells.length - 1 ; j++){//The last cell is processed after the for. cells[j].style.backgroundPosition = '-' + previousWidth.toString() + "px 0px"; if(navigator.userAgent.indexOf("Opera")!=-1){//mmm...Opera cells[j].style.backgroundImage = all_tablesRows[i].style.backgroundImage; } previousWidth += cells[j].clientWidth; } cells[cells.length-1].style.backgroundImage = all_tablesRows[i].style.backgroundImage; cells[cells.length-1].style.backgroundPosition = "100% 0%"; } } </pre>Su uso es muy sencillo, solamente se debe escribir la tabla de forma correcta indicando la imagen de fondo solo en la fila (tr) y luego con una llamada a la función todo queda configurado. La función revisa todas las filas de todas las tablas presentes en el documento y en las que se haya indicado una imagen arreglará las celdas configurando la propiedad 'background-position' y en caso de estar en Opera también la propiedad 'background-image'. La función tambien da la posibilidad de especificar que tabla se quiere arreglar, para evitar pasar por todas las tablas del documento. En concreto, se debe escribir la tabla: <pre><table width="150px" cellpadding="0" cellspacing="0" border="0"> <thead> <tr style="background-image: url(background.gif);"> <th>Firefox</th> <th>Internet Explorer</th> <th>Opera</th> </tr> </thead> <tbody> <tr> <td>Mozilla fundation</td> <td>Microsoft Corporation</td> <td>Opera Software</td> </tr> </tbody> </table> </pre>Y luego llamar la función, ya sea desde window.onload o como parte de otra función que genera una tabla. El uso de la función tiene además la ventaja que si el diseño de la imagen no tiene directa correspondecia al tamaño de la tabla, se puede hacer una imagen larga como el máximo ancho de la tabla y si ella resulta más corta se verá bien de todas formas, porque la última celda siempre se configura de modo que muestre el extremo derecho de la imagen.Francesco Barresihttp://www.blogger.com/profile/07396417056716676216noreply@blogger.com