Solved

Background image in table row

Posted on 2003-11-30
15
2,307 Views
Last Modified: 2010-12-24
Hi.

I have a table where I want to have one image as background for each row (spanning over all the cells).

This works:

<table>
<tr background="image.gif">
<td>Some text</td>
</tr>
</table>

However, if I use more than one cell in the rows...

<table>
<tr background="image.gif">
<td>Some text</td>
<td>Some more text</td>
</tr>
</table>

... the background image is repeated in both cells instead of spanning over them.

Do you know a workaround for this?
0
Comment
Question by:toker5
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
15 Comments
 
LVL 11

Accepted Solution

by:
Zontar earned 64 total points
ID: 9847414
Workaround is to span the cells together, set the background image for that cell. Then insert a table with 100% width, a single row and the same number of cells as the original row had before you spanned its cell:.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>

<style type="text/css">
  td#theCell {background-image:url('images/tn-treefrog.jpg');}
</style>
</head>
<body>
<table width="80" border="0">
  <tr>
    <td width="33%">&nbsp;</td>
    <td width="34%">&nbsp;</td>
    <td width="33%">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="3" id="theCell">
      <table width="100%" border="0">
        <tr>
          <td width="33%">&nbsp;</td>
          <td width="34%">&nbsp;</td>
          <td width="33%">&nbsp;</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td width="33%">&nbsp;</td>
    <td width="34%">&nbsp;</td>
    <td width="33%">&nbsp;</td>
  </tr>
</table>
</body>
</html>


0
 
LVL 19

Assisted Solution

by:Dexstar
Dexstar earned 62 total points
ID: 9847464
@toker5:

> ... the background image is repeated in both cells instead of spanning over them.
> Do you know a workaround for this?

I believe you have to apply the background at the TABLE level, to get this effect.  Try using a nested table, and set the background for the table.

If using a nested table won't work for whatever reason, you can use style sheets to have the image repeated in each cell, but you can set the offset, so it looks continuous.  But that sounds really messy... :)

D*

Hope That Helps,
Dex*
0
 
LVL 31

Assisted Solution

by:seanpowell
seanpowell earned 62 total points
ID: 9847917
It really depends on your layout - perhaps a simpler method is just to stack the tables directly, and apply the image to the table tag. If the layout is specified correctly, you may be able to avoid nesting the tables.

<html>
<head>
<title>Tables and Images</title>
<style type="text/css">
<!--
table#row1 { background:url(myimage1.gif); background-repeat:no-repeat; }
table#row2 { background:url(myimage2.gif); background-repeat:no-repeat; }
//-->
</style>
</head>
<body>
<table id="row1" border="1">
  <tr>
    <td>Some text</td>
    <td>Some text</td>
  </tr>
</table>
<table id="row2" border="1">
  <tr>
    <td>Some text</td>
    <td>Some text</td>
  </tr>
</table>
</body>
</html>
0
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 

Author Comment

by:toker5
ID: 9849689
Zontar:
This is exactly what I wanted to avoid. There'll be so much overhead with this method...

Dexstar:
I could do that, but as you say, it would be very messy. And I'm writing a JSP-tag to provid a dynamic list/menu, so I don't think this solution would be an option.

seanpowell:
I'm afraid this would leave gaps between the tables which I couldn't afford.

Thanks for the quick responses, though.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9850416
>>this would leave gaps between the table
There wouldn't be any gaps if the CSS attributes were set correctly - it's just difficult to code for you without a more complete picture of the layout. Let me know if you need an example...
0
 
LVL 5

Assisted Solution

by:crazycomputers
crazycomputers earned 62 total points
ID: 10726649
Will using CSS with tr work?

<HTML>
<HEAD>
...
<STYLE TYPE="text/css">
<!--

table.bkgd tr {
    background: url(myimage1.gif);
    background-repeat:no-repeat;
}

// -->
</STYLE>
<BODY>
...
<TABLE CLASS="bkgd">
<TR><TD>...</TD><TD>...</TD></TR>
</TABLE>
...
</BODY>
</HTML>
0
 
LVL 5

Expert Comment

by:crazycomputers
ID: 10726683
Hmm, that is pretty weird.  Both IE and Opera render it with the image repeated.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10848887
The only workaround that I know of is stacking the tables - or remove the tables completely and use CSS.
It does not leave gaps if set correctly, but the asker never responded back so I can't help them.
0
 
LVL 5

Expert Comment

by:crazycomputers
ID: 10851984
Just as a side note, using the CSS tr{} does render "properly" in Mozilla (at least the old version I have) - the background is not broken up.  I'm not sure which set of browsers is violating the CSS standard.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 10966763
No comment has been added to this question in more than 21 days, so it is now classified as abandoned.

I will leave the following recommendation for this question in the Cleanup topic area:
   Split: seanpowell, crazycomputers, Zontar and dextar

Any objections should be posted here in the next 4 days. After that time, the question will be closed.

mplungjan
EE Cleanup Volunteer
0
 
LVL 5

Expert Comment

by:crazycomputers
ID: 10967325
Not that I object to the split, but 4 days and 2.5 hours are hardly the same thing...
0
 
LVL 4

Expert Comment

by:conticreative
ID: 27652108
I know this is abandoned, but since I am facing this problem now I figure I can add to the discussion at least for those stumbling here later.

Setting a background image to the <tr> works fine (as of this writing) in IE8, Fiirefox 3.5, ff3.6 and Opera
It does not work in IE8 Legacy (IE7) Chrome and Safari. I have not checked IE6 but I am pretty sure that if IE7 won;t work, neither will IE6.

I am presently looking at the page in Chrome and weirdly enough the Chrome Dev tools do not show the background image being inherited from the <tr>. However, the image tiles on each cell.

Using nested tables is out of the question. If I don;t find a CSS based solution I'll simply either rebuild the table with stacked <div> or I'll insert 3 <div> in each cell to take the place of the <td>

The resulting code will be lighter both in the HTML and the CSS.

However this really stinks. There is no logical reason I can think of for the <td> to display the <tr> background. It has to be a bug or a rendering oversight. Especially since even IE displays it correctly.

I doubt I am going to find an elegant solution for this one, but I figure I'd save someone else the bother to check their browsers.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

717 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question