With some good-natured needling from a friend and with much sadness, I have turned the tables on using tables in my HTML and have crossed over the great DIVide to using DIVs. Now to be honest, DIVs may be more like what I was used to coding, way back in the day when I was a photo typesetter and used to have to hand code my layouts and preview them on another monitor. What is photo typesetting? Check it out, here. But, as the saying goes, to go forward you must look back.
DIVs are containers. If you have ever used QuarkXPress (note proper spelling), you know exactly what I am referring to. You make a text box or a photo box and then dump stuff in it, and then you can drag it around on the page and do stuff with it. Same idea. If you’re using a tool like Dreamweaver, you can place a box on your page and then use CSS to format the box and the content within. Or if you like, you can use a text editor like BBEdit and code it, then preview it in a browser.
While tables did give you the ability to keep things together, it was a pain sometimes to have to work within its confines. For example, while creating a navigation menu, Fireworks would create a table where every menu item was a separate cell in a table and when it went in the layout sometimes adjusting the table would pull the menu out of alignment. Then I would have to spend the time to pull each menu item out of the cell, place them all in the same cell, then combine all the cells into one.
With DIVs you can numerically position items on the page and format each DIV separately. Making changes or tweaking position is a simple matter of changing a line or two in the CSS. Granted, it will be a little harder for some people to wrap their brains around, but in the end the code is cleaner, easier to read and most likely a little faster loading than tables. Discrete boxes also offer the ability to integrate backend code, say, from a database, more simply.
Downsides? Well, duh. Aren’t there always? In this case, the downside is browser interpretation. Some browsers may interpret the code a little differently and therefore your page may vary slightly from one to another. However most browsers like Firefox, Safari, Chrome, Opera are pretty consistent. The bad boy on the block? Of course, Internet Explorer. You can forget version 6 altogether (it was given an internet funeral this past March) and plan on testing using version 7 and 8.
I am in the process of redesigning the TeKno Ziz site, and I am using DIVs. Stay tuned for the upcoming release. What’s your experience with tables and DIVs and all things HTML? Let’s hear what you have to say.