Re: convert a table to a <div> controlled layout

Jonathan N. Little wrote:
sheldonlg wrote:
Adrienne Boswell wrote:

1. Nested tables are a nightmare.

How so? I religiously indent properly and so never have had problems with nested tables. Also, a good editor will catch proper bracketing. If not, then validation picks it up. So, how is it a "nightmare"?

2. Using an external stylesheet makes global changes almost instant.


Okay, now this topic has been discussed not less than a *million times* but here is a realistic example.

Web site with a typical top banner, left menu, right content, bottom footer. You use a table to lay all this out, then nested tables to position the logo image with respect to company text on top banner. Another nested table for the nav links, a few more for the content... Good! You repeat this for the dozen or so pages -- (just a small company).

Company now wants to spruce up the website. New logo, new colors, the works! They want the new snazzy logo to be in the upper-left. No more vertical menu, but one horizontal one across the top. Oh and also rearrange all the product images and descriptions so instead of having the pictures to the left and descriptions to the right, have each item boxed with a border and descriptions below.

Okay, with tables you have to totally redo the entire website. Adjusting the tables, maybe rowspans and colspans...arrgh...redo would be easier. But then you have to reproof your copy, might make a typo right?

Now if the site had been done with semantic markup and separate spreadsheets: banner is a div, nav links in a ul list, headings, and paragraphs, etc... it may be possible to make all the changes with only editing the one stylesheet! Or maybe with minimal markup editing, new image here, class name there, maybe a container element there. No changes to the content text so no need to reproof your copy...

Now marketing is not sure about the "new look", optional stylesheets could easily be created to supply options with little effort. Attached a different stylesheet and the whole website, poof, has a new look.

No comparison on the maintenance argument, however with that said, for this approach to pay off you *have* to approach the design differently than the old 90s "sketch out a grid on paper--slice 'n dice image--stuff some tables" method of web design.

Yes, I can understand that. There is also a flip side to that coin. You may not want overly global changes -- but it is a good point.

3. Separating style from markup means faster download time.

Really? Can you expand upon this point please?

"I want all the paragraphs in the item descriptions to have indented text"

CSS one-liner:
div.descriptions p { text-indent: 3em; }

No zillion FONT elements, no &nbsp; or space GIFs..

"Oh and we want the text red!"

div.descriptions p { text-indent: 3em; color: red; }



Great answers. I thank you. The second part (one-liners) is especially good. For the first part (page layout), I now realize what all of you meant by "nested tables". That is not what I had in mind with "nested tables". Of course I do the broad layout with divs. What I meant by "nested tables" was having a table and each row in the table could be clicked to open an inner table appropriately expanding on that row. Each of those, in turn, could be opened up to reveal a still finer-grained inner table. For something like that (what I envisioned with "nested tables") I don't see an advantage in divs over tables. After all, it is for tabular data that I am talking about. Also, all of these would occur in the "right content area" of your example.
.

Relevant Pages

  • Re: convert a table to a
    controlled layout
    ... You use a table to lay all this out, then nested tables to position the logo image with respect to company text on top banner. ... with tables you have to totally redo the entire website. ... Attached a different stylesheet and the whole website, poof, has a new look. ...
    (alt.html)
  • Divs Wont Sit On Same Line in IE
    ... I have two divs in the banner area of my website, ... photograph, the other the title and logo for the program. ... the divs sit ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: convert a table to a
    controlled layout
    ... Another nested table for the nav links, a few more for the content... ... Oh and also rearrange all the product images and descriptions so instead of having the pictures to the left and descriptions to the right, have each item boxed with a border and descriptions below. ... Attached a different stylesheet and the whole website, poof, has a new look. ... The broad brush you do with divs. ...
    (alt.html)
  • Re: convert a table to a
    controlled layout
    ... Another nested table for the nav links, a few more for the content... ... the pictures to the left and descriptions to the right, ... different stylesheet and the whole website, poof, has a new look. ... The broad brush you do with divs. ...
    (alt.html)
  • Re: Website Design And Development Services
    ... How much will you charge for a logo design. ... >A Website: ... there are businesses that really don't need ... If your market is just the town population, say as a dentist, you ...
    (rec.music.filipino)