[1] http://www.w3.org/2002/03/csslayout-howto

[2] http://en.wikipedia.org/wiki/Tableless_web_design

[3] http://www.ilovecolors.com.ar/detect-screen-size-css-style/

What is tableless layout?

It is a web design philosophy to avoid the use of HTML tables for page layout control purposes [2]. CSS will be responsible for the design of the layout.

Motivation [2]

Table is not flexible. The position and style of the content cannot be easily maintained. A lot of nested <tr>, <td> and <th> tags will also be used to built the layout, which is inconvenient, and waste bandwidth. With CSS, you can do that by specifying the positions.

Search engine Web crawler does not know whether your table is used as a layout control or storing relevant contents, e.g. the price table. This gives inaccurate search results.

As many devices of different screen size may visit your web site, it is possible  to specifu a different style sheet to hide and show different elements on the pages for better user experience across different screen size.

How to implement tableless layout?

There are multiple ways to implement tableless layout.

Method 1: Absolute layout [1]

1. Divide a HTML pages with divisions, each with a unique ID. For example,

<div id="login" class="side_module">, <div id="content">, <div id="search" class="side_module">

2. Apply the CSS on these divisions

/* Properties that both side lists have in common */
div.side_module {
width:10.2em;
position:absolute;
top:0;
font-size:80%;
padding-left:1%;
padding-right:1%;
margin-left:0;
margin-right:0;
}
/* we leave some place on the side using the margin-* properties */
#content{
margin-left:10.2em;
margin-right:10.2em;
padding-left:1em;
padding-right:1em;
}
/* and then we put each list on its place */
#login{
left:0;
}
#search{
right:0;
}

Method 2: Relative layout

The advantage of this method is that the browser can adjust the position for you.

A few words

If you want to adjust the page layout for different screen size, you may use JavaScript to detect and load the stylesheet correspondingly.

//Code from [3]

$(document).ready(function() {
if ((screen.width>=1024) && (screen.height>=768)) {
alert('Screen size: 1024x768 or larger');
$("link[rel=stylesheet]:not(:first)").attr({href : "detect1024.css"});
}else {
alert('Screen size: less than 1024x768, assume it is 800x600');
$("link[rel=stylesheet]:not(:first)").attr({href : "detect800.css"});
}
});