Design > Table-less Layout >

Tabled to Table-less Conversion, Step 1

All references to tables were removed. Layers were created using <div> tags:

• banner (new .bannerlayer)
• navigation bar (new .navmenulayer)
• main body (three-columned "table", new .mainlayer)
• left sidebar (same .leftelement)
• main content (same .mainelement)
• right sidebar (same .rightelement)

Two of the existing library blocks remain: the left sidebar and the copyright. However, the navigation bar library block, which contains a table, was eliminated, and the code in this page was modified; this element no longer links to the library and the page is not linked to the site template, either. The <td> and the <tr> tags were converted to <div> tags. The new layers were added to the style sheet, with 100% widths set.

After this conversion was done, the page has a new layout, which you are viewing now. You will notice that everything is laid out in the order in which it is coded in the file, and that the three-columned layout does not render.

The next step would be to add the attributes for the new layers to the style sheet, and tweak the styles to get the navigation, sidebars, and main content elements properly colored, sized, padded, and placed.

Tabled to Table-less Conversion, Step 2