Web programming TipsBy 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!
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!
