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!

Please rate the tutorial

1 2 3 4 5 6 7 8 9 10



Learn SQL Programming By Examples [Kindle Edition]2.99

Learn PHP Programming by Examples [Kindle Edition] $2.99

Learn Visual Basic 6.0 [Kindle Edition] $1.99

How to Build Your Own Web Site from Scratch [Kindle Edition] $1.49

New-trip.com website source code

Comments
 
Register to add comments ( 1000 char ) for tablecss.html.php.