Converting table-heavy pages to CSS

Discussion in 'CSS' started by Kat2, Jul 20, 2006.

0
  1. #1
    I am faced with the task of converting a table-heavy page from using HTML tables to using CSS. In the process I'll be taking out all the Javascript (of which 99% is image-rollovers). Is there any easier way to convert from tables to CSS without re-coding the entire thing from scratch?
     
    Kat2, Jul 20, 2006 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    No. CSS layouts depend on having well structured, semantic and well formed (valid) html. No non-trivial layout is well structured or semantic.

    Strip out the content and give it proper html markup. Go back then and wrap div elements around the major groupings. Keep in mind that divs are not meant to hold content, they hold groups of other block level elements. Each group represents a styling context. Much like a drawer in a chest. You can move the drawer to other spots in the chest, and you can re-arrange the contents of the drawer without affecting the other drawers.

    Just start at the top and work down. But nothing works 'til you get the html markup right.

    cheers,

    gary
     
    kk5st, Jul 21, 2006 IP
  3. kaethy

    kaethy Guest

    Messages:
    432
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I'm in the process of recreating a site that was done in FP, with tables. I made a simple CSS template, then I copy the text & paste it into my template, then I take out the extra code. There's just too much junk in the old pages to try & fix them IMO.
     
    kaethy, Jul 22, 2006 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    Erratum:
    Should read: "No non-trivial table based layout is well structured or semantic."

    cheers,

    gary
     
    kk5st, Jul 22, 2006 IP
  5. Vi5

    Vi5 Guest

    Messages:
    90
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I would ignore your current code and work from a screenshot of the layout.
     
    Vi5, Jul 23, 2006 IP
  6. AdamSee

    AdamSee Well-Known Member

    Messages:
    422
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    135
    #6
    Definately. Work to a screenshot or PSD file and create your structure from there.
     
    AdamSee, Jul 23, 2006 IP
  7. Superorb

    Superorb Peon

    Messages:
    149
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I would honestly start with a clean slate. Have it open in one window and code from there. That way you know the code and are familiar with the semantic layout of the page. This way you can add comments so people will understand it at a later time. (even though html coded for css is usually pretty easy to read if done right) It will save you time in the long run not having to hunt for why something isn't working or won't validate.
     
    Superorb, Jul 28, 2006 IP