Just to retain my clients and ensure I remain relevant to the ever-changing web industry, I always perform web upgrade and maintenance to most of my clients. I started web development way before the emergence of tableless design. The demands of my clients too were changing every time. They had to keep with the high level of competition in the market. Since most use online marketing as their primary form of reaching out to their clients, as a developer and web designer I was going to be a major determinant of their success in the market. To help them be at par and have an edge over their competitors, I shared with them the new features of tableless design. No one would afford to ignore this. What followed was web upgrade of my clients’ sites.
Using the tableless design was not going to be a major problem for me, thanks to my intermediate knowledge of the HTML/XHTML. In fact, I only used my basic CSS knowledge when dealing with the tableless design.
One of my first tasks was to change each of the table cells to <div> tag that most developers refer to as a layer. I enjoyed this process. It was that easy. Imagine changing the “td” to “div”. During this process, I deleted the table and the tr tags together with other attributes like width from the previous table.
My page was full of the class attribute since it can always be used as many times as possible. It allows multiple elements to have access to the single style. In tableless design, the classes generally begin with a period (.). I preferred naming my ids according to layers they were attached to i.e. “header” or “navigation”. I opted to name the classes according to what was being styled i.e. for special list formatting I used class= “list” and for important sections of content I used class=“emphasis”.
I did face a few problems during the conversion of the HTML Table Layouts into CSS Tableless designs with positioning. I had to encounter static positioning, float property, and clear property. I used static positioning while interested to span the entire width of the web page. In case I had no content, I set the height to zero. I used the shift property to move the layers to the right or left of the contents of the neighboring layers located below it. Whenever I wanted to force a layer to move out of the way, I used the clear property. For example, using “clear: right” will clear the floats on the right side and “clear: both” clears floats on both sides.
After some few months, I had converted a great number of sites just to enable my clients keep up with the ever changing web development features and the stiff competition in the market.