Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1085
  • Last Modified:

HTML table help - image slicing

I'm trying to set up a complex table with many colspan and rowspan set.  Here is the preview:


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">
    <td colspan="5"><img src="images/homeimghover01.jpg" /></td>
    <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>
    <td rowspan="3"><img src="images/homeimghover06.jpg" /></td>
    <td colspan="2"><img src="images/homeimghover07.jpg" /></td>
    <td colspan="2"><img src="images/homeimghover08.jpg" /></td>
    <td><img src="images/homeimghover09.jpg" /></td>
    <td colspan="5"><img src="images/homeimghover10.jpg" /></td>

Open in new window

1 Solution
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.
M256Author 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:

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

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.
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

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.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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" />

Open in new window

M256Author Commented:

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.
M256Author Commented:
Thanks for your fast response and accurate solution.  This was perfect!

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now