CSS Table-Base Layout a New Way of the Webpage Layout

Computer Programming Web programming Tips

CSS Table-Base Layout a New Way of the Webpage Layout

By Sergey Skudaev

CSS table-base layout is a new way to layout a web page! With Internet Explorer version 8 it becomes posible to use css grid layout in the same easy way we used HTML table layout in old ages.

This web page created with CSS table-base layout and if you use older browser you will not be able to see it properly. I on purpose did not provide any support for old browsers. Come on! You have to upgrade your browser if you want to see a new stuff!

CSS table-base layout

From the image above you can see that page block includes header block and content block. The content block is a CSS table. It has caption block, then the first row block is displayed. The first row block includes three table-cells: the left, the middle and the right. Then the table-footer block with footer is displayed. That is it. The complete CSS file tablestyle.css you can download here.

Display property may include the following values:

display:table;
display:table-caption;
display:table-header-group;
display:table-column;
display:table-column-group;
display:table-row;
display:table-row-group;
display:table-cell;
display:table-footer;
display:table-footer-group;

I used for this page only table, row, cell and caption. Main CSS blocks are displayed below:

#content {
display: table;
top:0;
text-align:left;
width:1000px;
background:#ffff77;
margin:0 }

#row1 {
display: table-row;
width:1000px;
}

#left {
display: table-cell;
width:160px;
background:#465D7C;
padding:10px;
}

#middle {
display: table-cell;
background:#ffffff;
padding:20px;
}

#right {
display: table-cell;
width:160px;
background:#465D7C;
padding:10px;
}

#row2 {
display: table-footer;
width:1000px;
height:90px;
}

#footer {
clear:both;
margin-top:-10px;
padding-top:0px;
width:1000px;
height:90px;
background:#9999CC;
}

Experiment with this new display property!

My eBooks on Amazon.com

US UK BR CA