The method of using table to implement common layout in five kinds of CSS

This article mainly introduces the CSS using table to achieve five common layout methods of the relevant data, small series feel very good, and now share to everyone, but also for everyone to do a reference. Follow the small part together to see it, hope to help everyone better grasp the CSS using table to achieve common layout.

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;}