Computer Programming web 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:

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

Subscribe to our mail list to receive free code examples.

Comments

No comments yet.

Add Comment

* Required information
(never displayed)
 
Smile Sad Huh Laugh Mad Tongue Crying Grin Wink Scared Cool Sleep Blush Unsure Shocked
 
1000
Type the word for the number 9.
 
Enter answer:
Captcha
Refresh
 
Enter code:
 
Notify me of new comments via email.
 
Remember my form inputs on this computer.
 
I have read and understand the privacy policy. *
 
I have read and agree to the terms and conditions. *
 
 
Powered by Commentics