{"id":716,"date":"2011-02-07T05:42:15","date_gmt":"2011-02-07T05:42:15","guid":{"rendered":"http:\/\/awgentry.com\/?p=716"},"modified":"2011-02-07T05:42:15","modified_gmt":"2011-02-07T05:42:15","slug":"webpage-layouts-tables-vs-css","status":"publish","type":"post","link":"http:\/\/awgentry.com\/weblog\/webpage-layouts-tables-vs-css\/","title":{"rendered":"Webpage Layouts: Tables vs CSS"},"content":{"rendered":"

Just like a newspaper would be tough to read through if each article were on its own page and thrown in a pile, users struggle with webpages which lack a layout<\/a> design. Laying out your pages properly can help with the visual organization of a webpage and let people find what they want quickly and easily.<\/p>\n

\n
\"a<\/a>

Image via Wikipedia<\/p><\/div>\n<\/div>\n

You may have heard of both tables and cascading stylesheets<\/a> being used as layout tools for websites — that is, placing website elements like jigsaw puzzle pieces on the page in order to set everything in its proper place. While either is a possible option, there’s good evidence to show that tables are now obsolete for this purpose.<\/p>\n

The original purpose of the TABLE<\/a> tag and related tags<\/a> was to build charts containing columns and rows of data. Web designers<\/a> <\/span>later expanded their use to include laying out pages in a grid structure.<\/p>\n

This worked decently well, but it caused accessibility<\/a> issues and used complicated and hard-to-maintain code, especially when several tables had to be nested within each other.<\/p>\n

With the advent of positioning by DIV tags<\/a> and other positional cascading stylesheets, the table concept as a layout tool has become obsolete<\/a>. CSS allows designers to create layouts which are flexible by media (screen, print, handheld…), work better with search engines and alternative browsers such as screen readers<\/a>, and usually take less code to make the same layout.<\/p>\n

Related articles<\/h6>\n