« Need a recommendation for a streaming server... | Main| Since it was asked - what are your top sci-fi movies of all time? »

Another Question: Easiest way to convert from tables to CSS?

QuickImage   
Category
Bookmark : del.icio.us  Technorati  Digg This  Add To Furl  Add To YahooMyWeb  Add To Reddit  Add To NewsVine 

I have a client that has hired a design/marketing firm to come up with a look and layout for their corporate intranet/extranet site. This firm has delivered HTML files, images, JS, etc. as an "example" of the site. However, these people did it all in a crapload of nested tables instead of CSS.

 

My question is: Is there any methodology or tool that can ease the pain of slogging through all these tables manually and converting them to proper CSS? I have pages and pages to do, and if there is an easier way I really hope to find it.

 

I also thought that asking this would help others who find themselves in similar dire circumstances.

 

Thanks in advance for your suggestions!

 

Rock (from the Web)

Comments

1 - I still can't get over this comment: "unless you can bill them boatloads of hours, of course".

are you for real...? did you really mean that?

2 - If you can reasonably foresee reflow (even if the "when" is really no more than a heavily-weighted "if"), then the conversion is definitely worth the effort. You may find you have to simplify the layout somewhat, but if the layout needs to be liquid at all, then it will be worth the slight loss. Tweaking CSS beats the crap out of redefining table structures on a regular basis.

3 - Ben,

Depending on how many layers the tables are nested, it can be a real drain on performance. However, a middle ground I have also used in the past is to apply CSS Tags to my Tables instead of replacing them (and yes you get code bloat) Rocky, I will email you a sample of what I mean tonite if I can dig it out).

But absolutely you are right. If there is no overwheming reason to do it, it might not be worth it.

However, you till have to play with the Tables in Domino (unless you are using the raw HTML) to get the same end result. So if you have to take extra time and effort, it may well be worth looking at.

There are serious tradeoffs to CSS as you say, but once you have it nailed, maintaining is much easier.

In one app, I have to maintain different subforms and stylesheets to accomodate NS4 users (I cannot force them to change). I do not subscribe to the theory that unless you use my browser of choice, you cannot use the site.

4 - I just stumbled upon the description of this book:
http://more.ericmeyeroncss.com/about-book.html

The description says, that the book is also about transitioning from tables to style sheet layouts.
I haven't read the book yet (just ordered it), so I can't say whether it could help you or not.
Perhaps you'll give it a try.


5 - And the answer is, again, "it depends". Depends, that is, on the complexity of the layout. Unfortunately, the application of CSS in the various browsers is, um, let's be generous and call it inconsistent, shall we? If the nested table thing is holding a complex layout together, it's often both easiest and best to leave things as they are. There are things that tables do that can't quite be duplicated in CSS (and support for table-row, table-cell, etc., in the display attribute is sketchy at best in all current browsers).

Apart from that, take some time to figure out what does and doesn't belong in tables. Despite the protestations of some, the fieldname/field pair can be legitimately tagged as tabular data.

The "real" method is to group all of the logical sections of the page into divs (logical divisions). These can nest, of course. Once the page has been divided into "pools" of information, then and only then would one worry about what things look like and where they should appear on the page. (BTW, even the worst of the graphics-come-first designers are usually pretty good at logical arrangement of data, so you can usually pull a design apart into its component bits fairly easily.)

6 - Just a note to Chris Byrne to say excellent idea on the naming of DIVs. As one who is continuously learning CSS I'll take your idea and run with it

7 - Amen Stan.

Rock, you have mail.

8 - Ben - the reason that I want to switch it to CSS is that there is a possibility probability the the placement of "pools" of design/information will need to be changed - things moved, appearance changed, etc. Tables are quick and dirty and get the job done if the site has a minimal probability of changing; however this is not the case here. In this case we have a very complex site that is going to be maintained by one to two in-house developers after I leave. When (not "if", "WHEN") changes come down for the layout I want them to be able to go into the CSS and simply tweak it there to make it look the way they want; otherwise they will need to do heavy-duty editing of the passthru HTML to change anything about this site (and we're talking tables nested 6 or more layers deep).

Chris - Excellent suggestion on the naming of the DIVs. I was wondering how I was going to keep it all straight, and I think your idea is the way to go.

As for the subcontractor, that may be a possibility. Don't get your hopes up, but I'll see...

And yes, I got the pics - not quite dressing like the natives yet, though

Stan - I agree with you about the "right" place to use tables. In fact, the user-completed forms in this site will most likely be straight-up Notes forms, with tables, and styles assigned to the tables. I mean, forms rarely change (other than "move this field up, change this label"), and it allows me to use native Notes/Domino design elements. As for the use of CSS for the rest of the site, do you agree that, based on the description I gave Ben, the conversion is worth the effort?

Thanks for your responses so far; I am looking forward to where this goes...

Rock

9 - Chris - yes, we are using raw HTML, except for places where we have user-completed forms, and I will use views/view templates as well.

I look forward to your example - thanks.

Rock

10 - What is the reason why you want to switch? Do the nested tables not work, are they too slow, or is there some CSS work you can support using the existing design? It is just like people switching from formula language to LotusScript "just because". There are pros and cons to CSS just as with tables, and I wouldn't switch if not necessary (unless you can bill them boatloads of hours, of course).

11 - whew, ns4 + css, you have your work cut out for you sir. if i had to support ns4 i'd almost want to figure out a way to dynamically generate tables! no easy way out. boatloads of hours, here (someone) comes...

too bad you can't convince them to change to firefox.

12 - This is not going to be a painless exercise, especially if you have to deal with cross-broser compatability (you used the word "Extranet", so all control over browsers is potentially lost unless you can enforce a standard), forms vs pages, view displays, etc etc.

Unforunately designers do not always thing about performance. UGA redesigned their web site (http://www.uga.edu/) and do not even think about trying it over dialup. Sure it looks good, but performance wise? Yuck. (Off topic tidbit here since you are a dawg: At one point they had removed the link to the Atheltic Department from the site home page and nobody noticed it until I mentioned it to Claude Felton (the SID) at a football game. Thankfully, it reapperared shortly thereafter).

IBM Interactive was famous for their beautifully designed web sites for the US Open, the Masters, Macy's, etc. But performance wise they could never deliver.

So onward we go as this is all water under the bridge at this point.

My first suggestion is do what you recently did an article on: low-fidelity presentations. For each template, rip out all of the contents from the tables AND other tags and just leave the tags. Then map out the format (perhaps simply by printing the edited HTML). Then make an equivalent low fidelity model using DIV, SPAN, or whatever.

You could also take another approach and do an Edit replace, such as

replace

<TABLE>
<TR>
<TD>
<TD>
</TR>
</TABLE>
<TR></TR>

with

<DIV CLASS="TABLENAME">
<DIV CLASS="TABLENAMETR">
<DIV CLASS="TABLENAMETD">
</DIV>
</DIV>
</DIV>

Note my syntax for TABLENAMETR and TABLENAMETD. I do this to keep the association clear in my mind and so I can assign specifi properties to these classes.
This task is easier if they have assigned names to the Tables.

Once you do this, it becomes easier to play with the stylesheets. "Borrow" some sheets from sites that look similar in design or even from Blosgshere.

This is similar to how I made changes to my copy of the Blogsphere template and the associated style sheet. Get a copy of Dreamweaver, open the pages there, make the changes there, and then move the code to Domino (will make your life MUCH easier).

Note one nasty thing I discovered about IE vs Firefox & Netscape in the setting of styles for my blog (http://www.controlscaddy.com/) that I need to fix tonite:

Firefox and Netscape automatically resize my background images in the right hand column to the column width I had specified. IE does not.

Also, be careful in your use of the <SPAN></SPAN> Tag. It does not always behave as expected.

Of course, here is the commercial. If you need a subcontractor for this effort, I have time. I have spent many a long painful hour working CSS issues for Internet/Extranet sites (and now my blog).

Did you ever see that picture of you in Bermuda that I sent you?

Meet Rocky

Rocky Oliver
Rocky Oliver
If you see me at a conference, please stop me and say hi!

Calendar

Search

Categories

LotusGeek Tour 2008

DNUG08-2.png

Proudly Employed By

I am the Vice President of Products for TeamStudio

Our Corporate Blog

I am the Vice President of Products for TeamStudio

Thawte Notary

Thawte Web of Trust Notary

LOTUS GEEK gear

Social Networking


Add to Technorati Favorites

View Rocky Oliver's profile on LinkedIn

Rocky  Oliver

LotusGeek Blog Roll

Why display a blog roll when Planet Lotus does it so much better?

Dilbert

Buy my book!

Blog Buttons

Atheist - Unitarian - Humanist

Atheist Symbol

chalice_150.gif

Happy Humanist

Poker Players Alliance

This Site Designed By

YOU! If you would like to see your name and link here, read more about the Skin the Geek contest!