Tips for using table to implement layouts

This time to bring the use of table to achieve the layout of the technique, the use of table to realize the layout of the considerations, the following is the actual case, together to see.

This article describes the CSS using table to implement five common layout methods examples, share to everyone, specifically as follows:

Layout one:

Effect:

Code:

Html:

<p class= "header" >header</p><p class= "main" >main</p><p class= "Footer" >footer</p >

Note: P must have content, otherwise it will not show

Css:

body{  margin:0;  padding:0;  width:100%;  MIN-HEIGHT:100VH;  display:table;  Text-align:center;}. header,.main,.footer{  Display:table-row;}. header{  height:50px;  Background:tomato;}. main{  Background:skyblue;}. footer{  height:50px;  Background: #9d70ff;}

Layout two:

Effect:

Code:

Html:

<p class= "header" >header</p><p class= "main" >  <p class= "left" >left</p>  <p class= "right" >right</p></p><p class= "Footer" >footer</p>

Css:

body{  margin:0;  padding:0;  width:100%;  MIN-HEIGHT:100VH;  display:table;  Text-align:center;}. header,.main,.footer{  Display:table-row;}. header{  height:50px;  Background:tomato;}. main{  width:100%;  display:table;  Height:calc (100vh-100px);}. Main. left{  width:300px;  Display:table-cell;  Background: #fcea96;}. Main. right{  Display:table-cell;  Background:skyblue;}. footer{  height:50px;  Background: #9d70ff;}

Note: 100px in the Height property of main is the sum of the header and footer heights

Layout three:

Effect:

Code:

Html:

<p class= "left" >left</p><p class= "right" >  <p class= "header" >header</p>  < P class= "main" >main</p>  <p class= "Footer" >footer</p></p>

Css:

body{  margin:0;  padding:0;  MIN-HEIGHT:100VH;  display:table;  Text-align:center;}. left{  Display:table-cell;  width:200px;  Background:tomato;}. right{  display:table;  Width:calc (100vw-200px);  HEIGHT:100VH;}. header,.main,.footer{  Display:table-row;}. header{  height:50px;  Background:skyblue;}. main{  background: #fcea96;}. footer{  height:50px;  Background: #9d70ff;}

Layout four (double column layout, example for left fixed, right adaptive):

Effect:

Code:

Html:

<p class= "left" >left</p><p class= "right" >right</p>

Css:

body{  margin:0;  padding:0;  width:100%;  HEIGHT:100VH;  display:table;  Text-align:center;}. left,.right{  Display:table-cell;}. left{  width:300px;  Background:tomato;}. right{  Background:skyblue;}

Layout Five (three-column layout, example for left fixed, right fixed, intermediate adaptive):

Effect:

Code:

Html:

<p class= "left" >left</p><p class= "Middle" >middle</p><p class= "right" >right</p >

Css:

body{  margin:0;  padding:0;  width:100%;  HEIGHT:100VH;  display:table;  Text-align:center;}. left,.middle,.right{  Display:table-cell;}. left{  width:300px;  Background:tomato;}. middle{  background: #ffe69e;}. right{  width:200px;  Background:skyblue;}

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Animated sequence of CSS3 animation

A detailed description of the transform function in CSS3