We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you a podcast all about Citrix Workspace, moving to the cloud, and analytics & intelligence. Episode 2 coming soon!Listen Now

x

HTML table help - image slicing

Medium Priority
1,108 Views
Last Modified: 2013-12-13
I'm trying to set up a complex table with many colspan and rowspan set.  Here is the preview:

http://beta.osbornewood.com/layout/table.htm

The table code is correct as far as I can tell, but as you can see, the cells Corbels  and Tab(le) Le(gs) have incorrect white space in both Firefox and IE.

Can you correct this code?
<table align="left" border="1">
  <tr>
    <td colspan="5"><img src="images/homeimghover01.jpg" /></td>
  </tr>
  <tr>
    <td rowspan="3" height="172" width="245"><img src="images/homeimghover02.jpg" /></td>
    <td colspan="2" rowspan="2"><img src="images/homeimghover03.jpg" /></td>
    <td><img src="images/homeimghover04.jpg" /></td>
    <td rowspan="4"><img src="images/homeimghover05.jpg" /></td>
  </tr>
  <tr>
    <td rowspan="3"><img src="images/homeimghover06.jpg" /></td>
  </tr>
  <tr>
    <td colspan="2"><img src="images/homeimghover07.jpg" /></td>
  </tr>
  <tr>
    <td colspan="2"><img src="images/homeimghover08.jpg" /></td>
    <td><img src="images/homeimghover09.jpg" /></td>
  </tr>
  <tr>
    <td colspan="5"><img src="images/homeimghover10.jpg" /></td>
  </tr>
</table>

Open in new window

Comment
Watch Question

CERTIFIED EXPERT

Commented:
can you provide a picture of what you are trying to achives (final look), I don't think the table is correct, for instance when you are trying to slice image and assemble them together with a table you cannot have a border and you need to set the padding and spacing at 0px.

Author

Commented:
I have the border and padding and spacing turned on so we can see the table layout more easily.
The final table should match this image exactly:
http://beta.osbornewood.com/layout/main.jpg

Turning these off brings everything together except for those two sections of unwanted whitespace.
Insert the following between lines 1 and 2:
<tr>
      <td width="245"></td>
      <td width="111></td>
      <td width="90"></td>
</tr>

The way the table is set up it doesn't understand what the column widths are supposed to be at lines 7, 15, and 18.
The colspan of two doesn't match up both ways. Adding an empty row at the top with the widths defined allows the table to work the way you want it to.

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
CERTIFIED EXPERT

Commented:
Better still use hotspots rather than slicing, it's much cleaner and you don't have to worry about the image at all than.

See attached code snippet for hot spots

See main.png for Fireworks PNG File with hotspots.

Cheers


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>main</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body bgcolor="#a18466">
<img name="main" src="main.jpg" width="750" height="441" border="0" id="main" usemap="#m_main" alt="" /><map name="m_main" id="m_main">
<area shape="poly" coords="373,211,449,211,449,398,373,398,373,211" href="javascript:;" title="Table Legs" alt="Table Legs" />
<area shape="poly" coords="449,94,515,94,515,184,449,184,449,94" href="javascript:;" title="Appliques" alt="Appliques" />
<area shape="poly" coords="72,260,338,260,338,390,72,390,72,260" href="javascript:;" title="Bun Feet" alt="Bun Feet" />
<area shape="poly" coords="449,184,515,184,515,398,449,398,449,184" href="javascript:;" title="Table Legs" alt="Table Legs" />
<area shape="poly" coords="534,77,750,77,750,398,534,398,534,77" href="javascript:;" title="Island Posts" alt="Island Posts" />
<area shape="poly" coords="257,94,449,94,449,211,257,211,257,94" href="javascript:;" title="Appliques" alt="Appliques" />
<area shape="poly" coords="39,111,239,111,239,245,39,245,39,111" href="javascript:;" title="Corbels" alt="Corbels" />
</map>
</body>
</html>

Open in new window

main.png

Author

Commented:
matrixnz:

I like your idea; the only problem is I need rollovers.
Corbels, Bun Feet, and Island Posts are just a simple one-for-one image swap; Appliques and Table legs have the two images (rectangles?) to swap at once.
images.zip

Author

Commented:
statler01:
Thanks for your fast response and accurate solution.  This was perfect!
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.