Solved

Background image in table row

Posted on 2003-11-30
15
2,299 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
15 Comments
 
LVL 11

Accepted Solution

by:
Zontar earned 64 total points
Comment Utility
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
Comment Utility
@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
Comment Utility
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
 

Author Comment

by:toker5
Comment Utility
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
Comment Utility
>>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
Comment Utility
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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 5

Expert Comment

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

Expert Comment

by:seanpowell
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

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.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

728 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now