Article Diary - General Knowledge Digest

Tableless Layout Tutorial - How to create a tableless website layout?

This tableless web design tutorial will help you learn how to create a website design with a tableless layout using XHTML, DIVs and CSS. Tableless web design (or tableless web layout) is a method of web design and development without using HTML tables for page layout control purposes. Instead of HTML tables, style sheet languages such as CSS (Cascading Style Sheets) are used to arrange elements and text on a web page. This tutorial will help you to switch from table-based to tableless web design with CSS.

This tutorial gently guides you through the transition from tables to CSS, and demonstrates how in many ways CSS layouts are easier. You’ll learn the basics of CSS layouts and see that there are many equivalencies between table and CSS concepts. Then you’ll learn to work with CSS starter pages as you convert a table-based design to a pure table-less CSS design.

Why Go Tableless?

Many of you have this question in mind that why should I really change to tableless web design. So, here is a list of advantages of using tableless layout design as compared to table-based design layout.

  1. Tableless design produces web pages with fewer HTML tags used purely to position content. This normally means that the pages themselves become smaller to download. The philosophy implies that all the instructions regarding layout and positioning be moved into external style sheets. According to the basic capabilities of HTTP, as these rarely change and they apply in common to many web pages, they will be cached and reused after the first download. This further reduces bandwidth and download times across the site
  2. Because of the Internet’s rapid growth and the increasing use of mobile phones and PDAs, it is necessary for Web content to be made accessible to users operating a wide variety of devices. Tableless Web design considerably improves Web accessibility in this respect.
  3. In tableless layout using CSS, virtually all of the layout information resides in one place: the CSS document. Because the layout information is centralized, these changes can be made quickly and globally by default. The HTML files themselves do not usually need to be adjusted when making layout changes. If they do, it is usually to add class-tags to specific markup elements or to change the grouping of various sections with respect to one another. Also, because the layout information is stored externally to the HTML, it is quite easy to add new content in a tableless design, whether modifying an existing page or adding a new page.
3.25 (4)
Article Rating (4 Votes)
Rate this article
Attached Files
There are no attachments for this article.
Comments
There are no comments for this article. Be the first to post a comment.
Name
Email
Security Code Security Code
Related Articles RSS Feed
13 Useful Javascript Syntax Highlighting Scripts
Viewed 1610 times since Mon, Jan 4, 2010
PHP Questions for Interview with Answers
Viewed 1641 times since Wed, Feb 24, 2010
Create A Page Peel Effect With CSS & jQuery
Viewed 1204 times since Tue, Jan 5, 2010
How to prevent access to a specific file on server using htaccess?
Viewed 1260 times since Sun, Mar 14, 2010
How to change the file type using htaccess?
Viewed 1168 times since Sun, Mar 14, 2010
Best Free Web Icons for Different Purposes
Viewed 1377 times since Mon, Dec 28, 2009
What is new in HTML 5?
Viewed 1241 times since Sat, Apr 3, 2010
Making A Basic PHP Template System
Viewed 1202 times since Tue, Dec 8, 2009
Open Source Web Analytics Framework
Viewed 1062 times since Sat, Jan 30, 2010
PHP Sound Captcha
Viewed 10641 times since Sun, Apr 11, 2010