HTML Tables to CSS Conversion

Posted on May 24, 2007
Filed Under Design |

CSS Layouts that Validate

There really isn’t an HTML to CSS or Tables to CSS converter that can do much more beyond casual conversions of simple layouts. After examining all the things available on the subject including wizards I think we can safely conclude that the best way to do a conversion is by coding it line by line.

What if your not a CSS expert and don’t know where to start? Well given the vastness of resources available on in regards to layouts using CSS a new person or one that knows little CSS could relatively easily adapt free solutions found on the web to meet their objectives.

In the years I’ve been doing CSS I’ve been asked only about a few dozen times to convert table layouts to CSS layouts while preserving content, layout integrity, and menu structure. Although not difficult for the most part, forms and tabular content I most always leave in table format largely because ease of change for site owners isn’t at all easy for someone who doesn’t understand CSS alternatives.

So how then can a person convert HTML Form layouts to cleaner and lighter CSS layouts? There is no simple answer so I’ll elaborate on a few fundamentals and pointers.

Understanding CSS Site Assembly

Take one thousand domains, create a snap shot, stack all those snap shots on top of one another and make them all semi-transparent. Now, if you could look down through all of them, you will notice some fundamental commonalities in all website design.

Websites share similarities in structure, appearance and size nearly all of the time. They have navigation left or right or both, they have a header or something that resembles a header to identify the site, they have a footer with links and maybe copyright information they have content. Sites have navigation in hundreds of layouts and formats visually but fundamentally they are all the same. They are lists, table cells, simple text links and other common formats. You will notice that all sites have the same fundamental underlying structure, a doctype, opening and closing html tags fundamental to all web sites and the list goes on. But how does that get you from HTML to CSS in conversion? Simple! Understanding the fundamentals is paramount to understanding CSS and web design in general and anytime you can reduce the complex down to manageable concepts or units of understanding the ease of adaptation increases as does your learning.

In the Rapid Template Design Kit I provide literally hundreds of resource elements for PhotoShop including actions, patterns and countless other custom resources specifically assembled to give a new designer a competitive edge over night. One of the core elements of the RTDK are the lessons on fundamentals in design.

When you decide to convert your site from an all HTML layout to a CSS Layout keep the above in mind and then follow these steps to convert.

1.) Don’t be so eager to convert your tabular data tables and html forms. The reason behind this is simple. It takes advanced knowledge of CSS to do it with the kind of quality that will also legitimately validate and still be functional. Besides the fact that such uses are perfectly valid.

If anyone tells you that keeping HTML tables for tabular data is unclean code then question everything they tell you from that point on. HTML Tables are NOT dirty code and using them for their intended purposes regardless of what web designers will tell you is 100% valid. Tables were designed for tabular data. Thats why its called a table. They were NOT intended for site layout although certainly usable.

2.) Recognize that tables are technically block elements although they can be made to behave like inline elements. Understanding the difference between INLINE and BLOCK elements is very important in how you structure your document. Because block level elements generally start in a new line (unlike inline-level elements) they most always contain other block elements such as paragraphs, forms, headers, outlines and so on. With the idea of “CONTAINER” in your head we move to the next step.

3.) Containers hold your sites content and although the methods will change the objective remains the same. A left column is still a left column and navigation in that left column is still navigation but the method changes from tabular containers (block elements) to the

container also a block element.

4.) Classes and ID’s! Next before we get to the nitty gritty is to understand that a class is used on elements in your document that may have multiple instances while ID’s represent a single item. Since your layout will largely consist of block elements understanding this is very important.

So if you create an element that is to appear several times on a page then you apply a class to it for styling. Alternatively the ID represents a single item. Both are articulated generally below;
HTML class=”myclass”
CSS .myclass{font-size: 1em;}

HTML id=”myid”
#myid{position: relative; height: 100px; width: 100px;}

5.) Converting; What I generally do when I convert HTML sites for clients is take a snap shot of the site and draw semi transparent layers over the image where I intend on using the

block elements that will be used for the layout. You don’t have to do it this way but it helps because not all items will fit the X Y layouts of standard default block element behaviors. Some items will have to be positioned “Absolutely” which means you tell them their exact position on the web page.

BTW to create a snap shot in windows you simply hold the CTRL key and press Print Screen twice. You can now create a new document and press CTRL + V to paste in the snap shot.

6.) Once you have your plan mapped out on the image, start by using an html editor or Notepad++ for instance, and create your foundation adding each element starting from the outside and working your way in. By doing this you create the elements in their most logical structural formats.

So for instance, if you have drawn boxes on your snapshot that represent for instance a header, a body, a footer and in the body is a left and right columns and in the header is a logo and a menu bar then you approach the coding in this way. You start with the outer most block element the container div and work your way in nesting each element as you go which may look like.

Keep in mind that although this is the suggested method for doing CSS layouts its not the only method. Visit the CSS Zen Garden for examples where a single CSS structure can be modified radically for appearance without the need to alter the core code. You start with one CSS structure and end up with multiple layouts simply by changing the style sheet.

7.) Next you add the styles to control the layout for positioning the elements and structuring the typography.

Now this brief set of steps are ONLY steps and not an actual tutorial on the process. A full blown tutorial would be certainly worth the time to create but is beyond the scope of this article. Keep in mind that conversions usually follow these steps above for consistency.

Comments

Leave a Comment

If you would like to make a comment, please fill out the form below.

Name (required)

Email (required)

Website

Comments


TEMP CODE: GDHXCDX17249629