Table2CSS is Cool

Send to Kindle

Two days ago, I wrote about a website that I was working on for a new friend. I mentioned that it was written a while ago, optimized for 800×600. It was rigidly coded, with very complex nested tables, with multi-column and multi-row spans, with absolute positioning, with image backgrounds in each cell, stitching together the desired look.

In the end, it appears to be one cohesive image on the back of any given page. That’s great if you don’t want/need to change anything. But, the second you want to introduce a new element on the page, it becomes maddening at best, and impossible at worst (without working on the actual background images to incorporate your new layout!).

I still haven’t pointed anyone to what site I’m talking about, but that might happen as soon as next week, we’ll see… In the meantime, I’m still just talking theory.

We wanted to embed a YouTube video of one of his most popular songs directly on the home page. In addition, we wanted to incorporate the new PayPal button (referred to in the previous post) on the home page as well, since most of the people who currently visit the site want to buy his CD rather than just poke around (trust me, we know that to be the case).

I tried modifying the tables to accomplish that quite a number of times. Each time, I broke the layout in one way or another, usually in a manner that was simply not acceptable.

Since I had no intention of redoing the entire site yet, and I didn’t want the home page to be jarringly different than the rest of the pages (which weren’t about to change), I was stuck. I decided to search for a conversion tool which would take a table-based design and turn it into a CSS-based one.

I found a great tutorial from someone who did a very complex site by hand, and I appreciate the effort he undertook to share that with the rest of us (and I’ll link to it to share the love). But, I had no interest or intention of doing this by hand.

I then found a site called Table2CSS that sold a tool that does exactly what I wanted. They supplied a trial version (that’s marginally crippled). I installed the trial, converted the home page, and it looked identical to the table version. Perfect!

Even though that was the only page that I needed/intended to convert for the moment, obviating the need for me to purchase the product, I decided that the author more than earned the $40 (OK, $39.95) 😉 that he was asking for the program, given that he saved me a ton of time already.

Before I continue, I need to point out that there are many articles on the net that claim (rightly so!) that this is a stupid thing to do (or even want to do), as the resulting CSS is absurd at best, basically mimicking each and every table cell in a ridiculous manner. I agree 100%, so I don’t want any reader to think that I endorse this as a wholesale (or default) approach to converting and then maintaining a site (or even a page) using this technique.

That said, I had a singular mission in mind, to achieve a short-term goal, and this tool was perfect for me. I did indeed purchase the product!

Here’s what it allowed me to do. I wanted to embed a YouTube video and the PayPal button (as noted above). Unfortunately, even though I could have used CSS to place the YouTube after the tables were rendered (avoiding having to touch the tables), the embedded video was larger than the blank area avilable on the home page, and spilled (covering) into a number of other areas (keep in mind that this was an 800×600 layout!).

Because the table cells spanned multiple rows and columns, it was extremely difficult to change the size of any cell without breaking the layout horribly. Also, because the cells had images associated with them, that added extra pain.

Even though the CSS layout was as rigid, and absolute, there was no concept of spanning any longer. Each original cell was now a div, taking up as much room as it required. This alone, along with the ability to easily decide when an image should be repeated (because I was growing a cell) or not (because the image wasn’t a simple background gradient) was a big win.

I was able to reposition the cells using pure CSS quite easily. I had to add a repeat for some images, and create one new image as a filler (by cropping an existing image to fit a hole that I created). I was then able to add just two new divs, and two new CSS blocks, one for the video and the other for the PayPal button.

The new home page looks identical to the old one, except for those additions. I don’t love the general look-and-feel of the site (so I’m not praising it, nor my ability to manipulate it), but I accomplished my goal exactly as I had hoped, with significantly less pain than it would have taken without Table2CSS.

So, thanks again Table2CSS for saving me a lot of grief, or more accurately, for enabling me to accomplish a task I would have otherwise foresaken, for sure! 🙂