HTML table help - image slicing

Posted on 2009-02-13
Last Modified: 2013-12-13
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

Question by:M256
    LVL 28

    Expert Comment

    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.
    LVL 5

    Author Comment

    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.
    LVL 9

    Accepted Solution

    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.
    LVL 29

    Expert Comment

    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="">
    <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

    LVL 5

    Author Comment


    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.
    LVL 5

    Author Closing Comment

    Thanks for your fast response and accurate solution.  This was perfect!

    Featured Post

    Do You Know the 4 Main Threat Actor Types?

    Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

    Join & Write a Comment

    Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
    Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
    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…
    Learn the basics of inputting and editing your text components in Prezi. We will cover how to set styles, position, and group your text components. In your Prezi editor, click anywhere on the canvas to add text: A flashing cursor informs you that yo…

    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

    15 Experts available now in Live!

    Get 1:1 Help Now