Solved

Background image in table row

Posted on 2003-11-30
15
2,305 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering 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

Suggested Solutions

Title # Comments Views Activity
email validation 9 48
CSS for <center> 14 35
Read text on Table 7 28
close pop up windows when logout or main window closes 17 50
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

749 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