Complex Table Help

Discussion in 'HTML' started by afrinspray, Jan 8, 2007.

  1. afrinspray

    afrinspray Guest

    afrinspray, Jan 8, 2007
    1. Advertisements

  2. afrinspray

    dorayme Guest

    Not that this is a great idea these days, ie. to use image slices
    but I have used them in the past for mildly complex or arty
    banners with links inside. Easiest is to use quality program like
    Fireworks to slice up and even generate the table, you can clean
    up the code later.

    If you want me to help (honestly, how could you resist?), please
    supply the original pic whole. Too boring to see get the sizes of
    all your slices and study your markup closely. But others may do

    You can also use an image map, probably simpler and more

    Best maybe not to do this at all but to redesign so that either
    you use styled html links that still look nice (my
    recommendation) or even pics that do not require such precise
    dorayme, Jan 8, 2007
    1. Advertisements

  3. afrinspray

    afrinspray Guest

    Dorayme, thanks for the help. Unfortunately I don't have fireworks.

    I do however have the photoshop document that I cut-up. It contains
    every single part... you could just make some layers visible and "Save
    for web" as needed. Check it out... (65k).

    To address the problem a little further...
    There's 6 links on the picture. For each link on the picture, there is
    a mouseover image that makes the text in that part bold. If I used one
    picture with no bolds and 6 others with one bold in each, I wouldn't be
    able to keep the current page's link bold (which is a requirement

    So really you end up with every combination of bold images possible
    that need to be preloaded if you just use one image that is swapped in
    and out. That's why I thought I'd have to cut it up like that...

    Also, the words (links) are staggered so you can't make clean cuts for
    the table (see the example... here's the link...

    Thanks for your help so far,
    afrinspray, Jan 8, 2007
  4. afrinspray

    afrinspray Guest

    Correction: 117k... not that it really matters.
    afrinspray, Jan 8, 2007
  5. afrinspray

    dorayme Guest

    Honestly, I don't recommend all this. But here is your image,
    re-sliced by me and exported, it is horrible markup but even
    works in Mac IE 5. To get this mess to work to roll things over,
    you will need to note the sizes of the slices and arrange your
    substitutes and so on for the hovers... I would not bother

    dorayme, Jan 8, 2007
  6. afrinspray

    afrinspray Guest

    Hmmm.... well any idea how I could better do this?
    afrinspray, Jan 8, 2007
  7. afrinspray

    John Hosking Guest

    I don't have the answer, but (at least) I've got a question. That ought
    to count for *something*. ;-)

    How many columns do you think you have in that table? Now look at each
    row and count the colspans you specify. I get different answers.

    Maybe the browser is doing the best it can with broken arithmetic.

    John Hosking, Jan 8, 2007
  8. afrinspray

    dorayme Guest


    (top posting fixed... hint, hint...)

    Well, why not use an image map? Where such is unavoidable or you
    need to link inside a pic, this is simple and you can get the
    needed coordinates easily from your Photoshop (which you

    Or, if you can, you can re organise. I used to have something
    like this for a header:


    and removed all the js and slices and pic of text but kept the
    pic (which I had taken the trouble to design) for decorative
    static banner and simply made a horizontal navigation html menu
    with same links (but scalable text). You might choose a different
    path to an HTML treatment. Without knowledge of your whole
    website, I cannot say.

    As for image maps, well, there are likely all over the place. You
    can see the code for such at:


    Each letter is a link. No fancy rollover, but that is fine surely?
    dorayme, Jan 8, 2007
  9. afrinspray

    afrinspray Guest

    The table should be 5 rows by 4 columns. I might not understand
    rowspan completely, but when you have a td rowspan of 2, the next row
    down has one less td, correct?
    Because for example if I click the catalogue link, the nav link for
    catalogue on the catalogue page has to always be bold.... so I have to
    break it up, or else I'll have way too many images for each combination
    (ie. I'll have to make an image with catalogue and about as bold,
    catalogue and contact as bold, catalogue bold by itself, etc..).

    Thanks for your help so far guys, I know I'm close. Worse comes to
    worse I'll use the link you gave Dorayme. :) Thanks for that.

    afrinspray, Jan 9, 2007
  10. afrinspray

    afrinspray Guest

    afrinspray, Jan 11, 2007
  11. afrinspray

    dorayme Guest

    Best to quote some context... but I recall a few things... You
    need to slice things up a bit more meaningfully surely? Part of
    the O and gue in catalogue is not a unit worth rolling over
    for... but this may be a mere test for you or at last, not
    obvious the intent? At least it is a table that has no gaps in as
    dorayme, Jan 11, 2007
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.