Here's another quick round of CSS tutorial.

Developers whether if by choice or as instructed, are moving away from traditional layouts which use html table.

Why are table-less layouts preferred? My simple answer is -- table-less web page loads faster. A page with bunch of html table and tables with bunch of cells will cause slow loading of webpage. But, even moving away from html tables, having a table on a web page will always be a need hence, we have to have this table using CSS and DIVs.

The image on the top-left is the skeleton of what will the following CSS render.

<style type="text/css">
body {margin:0;padding:10px;width:100%;height:100%;font-family:'Trebuchet MS';font-size:14px;}
div.outer_wrap {width:500px;overflow:visible; background-color:#FFFFFF;}
div.item_row_header {clear:both; width:500px; margin:0; padding:0; background-color:#669933; color:#FFFFFF; font-weight:bold; border-top:SOLID 3px #336600; text-align:center;height:25px;margin-bottom:1px;}
div.item_row {clear:both; width:500px; margin:0;padding:0;background-color:#CCFF99; color:#000000;text-align:center;height:25px;margin-bottom:1px;}
div.item_row:hover {background-color:#99CC66;}
div.item {float:left;width:120px;margin:0;padding:5;color:#000000;text-align:center;}
div.clear_row{clear:both;}
</style>

We have a div with style defined in outer_wrap. This wraps the entire table, we set a fixed with of 500 pixels and we want it to grow it's height (stretch down) if the content overflows) through overflow:visible definition. Then no margins and no paddings.

Next is item_row_header defines how should the header row looks like. Unique with this one are background-color, border on top and the font-weight being 'bold'.

The next one is item_row. This will wrap each row that we make. Notice that we also defined it to have a style when hovered - mouse cursor is moved over this row.

Then lastly, the div that will hold each item defined as item.

View the live demo here