We Recommend

HTML Dog: The Best-Practice Guide to XHTML and CSS
For readers who want to design Web pages that load quickly, are easy to update, accessible to all, work on all browsers and can be quickly adapted to different media, this comprehensive guide represents the best way to go about it.

Posted By

demixo on 09/11/08

Tagged

css html tablas

Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

basicmagic
saeed

background-image para las filas de una tabla

Published in: XHTML

URL: http://www.plexusweb.com/staff/colin/blog/post/95/Need-a-background-image-on-a-table-row

Gracias a este artículo, pude colocar fondos de imagen a para las filas de una tabla.

Plain TextExpand

/*
Don't do it the intuitive way...
*/
<table>
 <tr style="background: url(/images/tr-background.gif) no-repeat 0 0;">
   <td>Row 1</td>
   <td>Row 2</td>
   <td>Row 3</td>
 </tr>
</table>
 
/*
...because it doesn't work in IE6 or Safari, even if you set 
the <td> background element to 'transparent' or 'none'.
But you can still make it happen with just the one image:
*/
 
<table>
 <tr>
   <td style="background: url(/images/tr-background.gif) no-repeat 0 0;">Row 1</td>
   <td style="background: url(/images/tr-background.gif) no-repeat 50% 0;">Row 2</td>
  <td style="background: url(/images/tr-background.gif) no-repeat 100% 0;">Row 3</td>
</tr>
</table>
 
/*
You're just altering the background-position of the image, so that 
what should be on the left goes on the left (at 0), the middle 
part goes to the middle (50% horizontally), and the last part goes 
at the end (100%). Remember that values in the background-position 
element are ordered horizontal, then vertical, unlike the margin 
and padding elements.
 
And, of course, you'll want to separate presentation from content 
by putting the CSS elsewhere and classing the td's.
*/

Report this snippet

Comment:

You need to login to post a comment.