[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

Background image in table row

Posted on 2003-11-30
15
Medium Priority
?
2,319 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
12 Comments
 
LVL 11

Accepted Solution

by:
Zontar earned 256 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 248 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 248 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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 

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

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

590 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