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 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.
Image via Wikipedia
You may have heard of both tables and cascading stylesheets 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.
The original purpose of the TABLE tag and related tags was to build charts containing columns and rows of data. Web designers later expanded their use to include laying out pages in a grid structure.
This worked decently well, but it caused accessibility issues and used complicated and hard-to-maintain code, especially when several tables had to be nested within each other.
With the advent of positioning by DIV tags and other positional cascading stylesheets, the table concept as a layout tool has become obsolete. 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, and usually take less code to make the same layout.
Related articles
- CSS Positioning 101 (tc.eserver.org)
- The Rising Importance of Flexible Web Layouts (onextrapixel.com)
