Table-less Web Design
This article describe how to create your web page in a efficennt way using <div> tags insead using <table> tags. Tableless web design is a method of web design and development without using HTML tables for page layout control purpose. Instead of HTML tables for page layout style sheet languages (CSS) can be used to arrange elements and text on web.
Web designers use tables for multiple purpose -positioning images, text on web pages(page layout) ,creating rectangular boxes, displaying large arrays of data, creating inline web forms etc. but there are problems in using tables in web pages.
1.Tables load slowly : This is one of the prominent benefit of designing a website without using tables. Tables take a lot of time to load which eventually leads to losing users. Nested tables load more slowly, the more the tables are nested the longer it will take the web browsers to render the page. Nested tables are clumsy and increase the page size too. However if the same website is designed in a table-less structure it can shed up-to 60% of the file size.
2.Tables are inflexible: It is possible to create table layouts with percentage width , but they are slower to load, if specific widths are used in tables, they don't look good in monitors of different resolution size, and its too hard to customize the tables. Whereas table-less design are flexible ,and they are easy to customize too.
3.Tables hurt search engine optimization(SEO): the design concept of website should be based on search engine optimization .Websites with fewer codes are search engine friendly, these websites can be read easily by the search engine crawler as they have less code
4. Tables always don't print well: If you've ever tried to print an About Web page, you know that tables don't always print well. Sometimes you end up with pages that look okay, but the whole right side is missing. Other pages will print sections on various sheets.
Description / Technology Insight:
The pitfalls of using tables reduces the quality of web page and violates the web design standards, Here comes the picture of 'CSS and structural markup ' which eradicates the hidden hazards in tables. Web page with tables can be turned out into table less using simple CSS and div tags.
Tableless web design enhances the quality of site in these ways:
1. Make your page load faster
2. Lower your hosting cost
3. Make your redesign more efficient and less efficient
4. Help you maintain visual consistency throughout your site
5. Get your better search engine result
If we have designed our website in CSS, we will not face any difficulty while changing the style, graphic or font. We will not have to change the entire structure of that website. By editing the CSS files, we can change the entire pattern of that website. Furthermore, a web developer will not have to update all the pages of a website manually, just updating the CSS file will eliminate this need.
Tableless web design enhances search engine optimization
When a search engine crawls your sites , it goes through the code ,looking for information on what your site is about, the crawler gets confused if there are large number of table cells ,and it may bypass the content altogether, whereas this doesn't happen with tableless sites which use less HTML markups (
Search engines prefer human-readable text to HTML markup. The more human readable text and the less HTML markup , then more better the page is .
Search engines prefer smaller HTML files. The general rule is to make sure that page size do not exceed 100KB in size.
Those above conditions decide in ranking the web page, thus by using DIV's instead table tags can reduce the file size as well as html markup, thereby giving higher ranking to these table-less sites
There are pros and cons in table-less web designing . Table-less web design holds good for content layout, it improves the quality of the website, it obeys web standards. The main problem with table-less design is the wide differences that are to be found in browser support. There are considerable differences in implementing a CSS layout for multiple browsers due to bugs and mis-interpretation of the standards by different browser developers . For presenting multivariate data tables are good choice,here