Tables or Divs?
Have you ever looked at the source code of a website which uses tables for designing the layout? If so, you’ve seen numerous <tr><td></td></tr> tags. They can get pretty darn confusing and they make updating a website (for a hand coder like me) a nightmare! Tables are okay to use when appropriate - for tabular data. But for page layouts, it’s better to use divs.
Here are some great conversations over at my favorite web design website, Killersites. Div or Table? . One of the gurus at KS had this to say:
Tables were meant to make columns of tabular data. They are very controlled and linear.
Divs, on the other hand, are free. You can put anything anywhere in that Div, no horizontal or vertical columns to limit your positioning. So a table is like a tool box with all those little compartments that cannot change size, you can only rearrange them. A Div is like an empty box, you can move any element anywhere and resize it as you wish, no limitations. Place one elemet at exactly 92 pixels from the wall if you like.
So in your body you create an outer Div, the rest of the web site is built in that. Your banner is in one Div, menu is another Div, different boxes are different divs and content is a seperate div. All these divs can be placed individually anywhere on the web page.
Other advantages:
- When you name each Div seperately with an ID for the CSS, that ID can be used as a target for scripts or internal links as well.
- When you take away the CSS (important for those with disabilities) it degrades into a simple vertical text document, where tables will still have a layout that can make the reading of the page by screenreaders difficult to understand as it skips in an unlogical manner through the page.
- Those with disabilities can change the look of the site more effectively to meet their needs
- By using Divs, you can redefine the Div names with new positions, colors etc and in that manner completely change your web site design by loading a different CSS without bothering to change the source code. Either create different designs for those with disabilities or maybe just a special Valentines, Christmas, Halloween design for a few days…
Divs are the smart way to design web sites and make maintenance alot easier.
So, it’s a good idea to learn how to use divs and to use CSS to position and style them. Trust me, you’ll be glad you did!
Leave a Reply