Why Tableless Layouts

Why Tableless Layouts? ? I am an expert creating robust layouts using Tables and I use CSS for controlling additional styles like font and BG colors. Why I should not use Tables for layout?

Why Tableless Layouts? Go back to the history When HTML was created, Tables were not meant to produce the visual style of a web page. Tables were intended to display the tabular data only. Indeed there was not a proper method in place to cater the needs of advanced layouts. So our former web designer fellows discovered that they could use tables to develop robust layouts. Border="0" made it possible for designers to implement the layouts using tables W3C says, using Tables for layouts is like wearing dress shoes for jogging - both work, but they're the wrong tools for the job. I am an expert creating robust layouts using Tables and I use CSS for controlling additional styles like font and BG colors. Why I should not use Tables for layout?

Why Tableless Layouts? Honey you’re killing the web! There is a huge list of disadvantages using Tables if you start comparing with CSS, below are some key points to express the whole story. If you use Tables then - But still I don’t see any harm in using Tables? Have a look to the source code and see your valuable content is mixing too badly with presentational data. Your content won’t load unless this excessive presentational data is loaded separately for each page the visitors browse. It's very tough to maintain the visual consistency throughout the site. Redesigning the site is too much laborious and expensive. Site is less accessible for disable people and for user who browse using other devices like PDA.

Why Tableless Layouts? CSS Should Be Used For Layouts The Gurus of CSS/(X)HTML have their own valid reasons as to why CSS layouts are better, but these common reasons are presented again and again to build a better web. Using CSS your web layout will be - Okay! So now tell me some major advantages of using CSS layouts. More beautiful and accessible More flexible and faster More functional and supportive

Why Tableless Layouts? Welcome to the world of “beauty" CSS allows separating the content from its presentational data. It also provides a greater control over layouts than tables. It was never so easy with Tables to keep the position of visual elements completely consistent across the site. By changing a single CSS file one can completely change the aspect of a site to make it perfectly suitable for screen or printing. Layouts are much cleaner in their structure and presentation. Provides a greater support weather you work on a fixed width or liquid design layout. CSS supports to present alternate version of visual layout for the same page for a different user or browsing device. Coool! Please explain that in detail… Develop complicated layouts without damaging the structure of the document.

Why Tableless Layouts? Fasten your seat belts! Once single CSS file which can control the whole site, is called from the cache for any page a visitor browses your site. There is no question that it is much faster than having to get all the presentational data loaded every time again and again. Your web pages weigh much less as your complete presentational data is derived from a CSS file. That also helps search engines to read only your valuable content not the presentational data. CSS supports to present alternate version of visual layout for the same page for a different user or browsing device. How does CSS works in terms of Performance?

Why Tableless Layouts? Accessibility is the top priority How CSS is more accessible? CSS benefits accessibility above all by separating the document structure from presentation. It also allows users to view documents with their own preferred fonts, colors, etc. CSS provides support for automatically generated numbers, markers, and other content that can help users stay oriented within a document. CSS provides very good control over font size, color, and style. Some of us still use images to present as special text using a particular font type which may not be available on the client's machine. Which is not accessible to particular software such as screen readers and search engines can also not read that. CSS can render the alternative fonts if a preferred font is not available on user machine. Also the powerful WebFonts of CSS allows the users much greater control of client-side font information. If a font is not available it can be downloaded from the web, all according to author specification.

Why Tableless Layouts? Accessibility is the top priority How CSS is more accessible? Check some more accessibility features - CSS supports aural style sheets, which specify how a document will sound when rendered as speech. CSS provides more precise control over the display of alternative content than HTML alone. CSS allows users to override author styles while browsing if they find any difficulty browsing thru author defined fonts, styles etc.

Why Tableless Layouts? Be more flexible and efficient CSS-based design offers a degree of flexibility nearly impossible in restrictive Table based layouts for both, the site developer and the reader. Developers can quickly and easily redesign the entire visual elements of a site by modifying one CSS file. They can also present multiple designs for the reader. Separating content from the detailed structure of table-based layouts provides more added benefits in terms of compatibility and portability for future. CSS pages are supported by most browsers used by the visitors these days. CSS pages are more useful because of their universality and adaptability. CSS allows extreme flexibility in positioning and styling the visual elements of a layout. How efficient and flexible CSS can be?

Why Tableless Layouts? Be more flexible and efficient - One page, many designs One of the benefits of CSS is the ability to transform the way a page looks without altering the HTML code. Example - http://www.hp.com/ You will see a different color theme on HP website after every page refresh. Sounds great! Please tell me more…

Why Tableless Layouts? Present yourself proudly to search engines CSS encourages a web page to optimize a site perfectly for search engines. Being also done well with accessibility, minimizing the markups and using HTML tags properly will certainly help improve the search engine ranking. Can CSS help me with search engine rankings?

Why Tableless Layouts? Write it once and use anywhere for everyone As mentioned earlier, one single CSS file is enough to control a whole website. In edition to that, the same CSS file can be used as a template to derive the similar results for any other site. Any required visual changes can be achieved by changing the same CSS style properties. Checkout the web addresses below to see the power of CSS - Give me some online references please! http:// www.csszengarden.com http://www.cssvault.com (Online CSS web gallery) http://www.cssbeauty.com/ (Online CSS web gallery)

Why Tableless Layouts? An example of CSS layout Provide an example of how to make a CSS layout? Below is a simple example of a common three column web layout. In next two pages you will find the CSS and HTML code to create the same layout structure. Note: CSS class ‘container’ is assigned to control the whole layout in terms of its position, width, background color/image etc.

Why Tableless Layouts? An example of CSS layout – HTML code <div class=“container"> <div class="header">HEADER</div> <div class="container"> <div class=“leftbar">Left</div> <div class="content">Conent…</div> <div class=“rightbar">Right</div> </div> <div class="footer">Footer</div> </div> Provide an example of how to make a CSS layout?

Why Tableless Layouts? An example of CSS layout – CSS code body {color:#000; font-family:"Arial",Helvetica,sans-serif; font-size:76%; line-height:1.5; padding:0pt; } .container { text-align: left; width: 700px; } .header { margin: 0; background: #FBFF32; } .leftbar { float: left; width: 150px; background: #4456DA; } .rightbar { float: right; width: 150px; background: #44D1DA; } .content { float: left; width: 400px;} .footer { clear: both; background: # BABABA ;} Provide an example of how to make a CSS layout?

Why Tableless Layouts? Conclusion Tables should only be used in extreme cases where there is no other viable alternative. With taking care of accessibility and proper testing for disabled users. Thanks!

http://moodle.apc.edu.ph	2577
http://moodle1.dls-csb.edu.ph	35
http://leaabarentos.com	26
http://www.slideshare.net	20
http://10.106.1.60	7

Why Tableless Layouts

by Rajveer Rathore on Jun 21, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 2,665

Statistics

Why Tableless Layouts — Presentation Transcript