This design philosophy is called CSS Tables. There are no <table> tags involved because tables are supposed to be used with tabular data. The idea of CSS Tables uses <div> tags to separate data and uses the CSS display property to make them act like tables, table rows, and cells. This seriously takes away from the complexity of making multi-column layouts. Here is an example:
XHTML
<body> <div id="wrapper"> <div id="header"> <!-- header content --> </div> <div id="main"> <div id="leftNav"> <!-- navigation column content --> </div> <div id="content"> <!-- main article column content --> </div> <div id="rightNav"> <!-- navigation column content --> </div> </div> </div> </body>
CSS
#main {
display: table;
border-collapse: collapse;
}
#leftNav {
display: table-cell;
width: 175px;
}
#content {
display: table-cell;
width: 400px;
}
#rightNav {
display: table-cell;
width: 175px;
}
Using the display property we changed the div with the id of "main" into a pseudo table. We also changed the divs within the table div into table cells. Notice the lack of table row. If you only have one row the enclosing row element doesn't need to be there. The browsers create an anonymous table row element for them to reside in. You can even skip the container element that makes the table. All you really need is the table cells. An example requiring table rows (but doesn't include the table) is below:
XHTML
<div class="row"> <div class="cell"> <!--Data --> </div> <div class="cell"> <!--Data --> </div> </div> <div class="row"> <div class="cell"> <!--Data --> </div> <div class="cell"> <!--Data --> </div> </div>
CSS
.row {
display: table-row;
}
.cell {
display: table-cell;
width: 175px;
}
This can make web design so much simpler and will allow even novices to CSS to make logical and pretty layouts without much work. I personally can't wait for the future when this will become available to use without worry that only a small portion of users will be able to see my web pages in all their glory.
MultiQuote
| 