Tuesday, October 18, 2011

Why tables are stupid in HTML Pages layout

Just like search engines, most screen readers read web pages in the order that they are displayed in the HTML. And tables can be very hard for screen readers to parse. This is because the content in a table layout, while linear, doesn't always make sense when read left-to-right and top-to-bottom. Plus, with nested tables, and various spans on the table cells can make the page very difficult to figure out.
This is the reason that the HTML5 specification recommends against tables for layout and why HTML 4.01 disallows it. Accessible web pages allow more people to use them and are the mark of a professional designer.
With CSS, you can define a section as belonging on the left side of the page, but place it last in the HTML. Then screen readers and search engines alike will read the important parts (the content) first and the less important parts (navigation) last.
  1. Tables are usually more bytes of markup.(Longer to download, and more bytes of traffic for the host.)
  2. Tables usually prevent incremental rendering.(Takes longer for the user to see anything on the page.)
  3. Tables may require you to chop single, logical images into multiple ones.(This makes redesigns total hell, and also increases page load time [more http requests and more total bytes].)
  4. Tables break text copying on some browsers.(That's annoying to the user.)
  5. Tables prevent certain layouts from working within them (like height:100% for child elements of ).(They limit what you can actually do in terms of layout.)
  6. Once you know CSS, table-based layouts usually take more time to implement.(A little effort up-front learning CSS pays off heavily in the end.)
  7. Tables are semantically incorrect markup for layout.(They describe the presentation, not the content.)
  8. Tables make life hell for those using screen readers.(Not only do you get the other benefits of CSS, you're also helping out the blind/partially-sighted. This is a Good Thing.)
  9. Tables lock you into the current design and make redesigns MUCH harder than semantic HTML+CSS.(Have you seen CSS Zen Garden?)
About.com says  : http://webdesign.about.com/od/layout/a/aa111102a.htm


More :http://coding.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/


More : http://www.hotdesign.com/seybold/everything.html


Arguments :http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html    ,   http://webmasters.stackexchange.com/questions/6890/are-html-tables-bad-for-seo