Home > Web Front-end > CSS Tutorial > Examples of CSS methods for using tables to implement five commonly used layouts_CSS Tutorial_CSS_Web Page Production

Examples of CSS methods for using tables to implement five commonly used layouts_CSS Tutorial_CSS_Web Page Production

韦小宝
Release: 2017-12-16 10:14:09
Original
1687 people have browsed it

This article mainly introduces the relevant information about the examples of five commonly used layout methods using tables in CSS. The editor thinks it is quite good. Now I will share it with you. There is CSS source code for you to use as a reference. Friends who are interested in CSS, please follow the editor to take a look.

This article introduces examples of CSS methods to use tables to implement five common layouts, and shares them with you. The details are as follows:

Layout one:

Effect:

Code:

html:


<p class="header">header</p>
<p class="main">main</p>
<p class="footer">footer</p>
Copy after login


Note: There must be content in p, otherwise it will not be displayed

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;
}
Copy after login


Layout 2:

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>
Copy after login


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;
}
Copy after login


Note: 100px in the height attribute of .main is the sum of the heights of header and footer

Layout 3:

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>
Copy after login


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;
}
Copy after login


Layout four (double column layout, the example is fixed on the left and adaptive on the right):

Effect:

Code:

html:


<p class="left">left</p>
<p class="right">right</p>
Copy after login


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;
}
Copy after login


##Layout five (three-column layout, the example is fixed on the left and fixed on the right, Middle adaptive):

Effect:

Code:

html:


<p class="left">left</p>
<p class="middle">middle</p>
<p class="right">right</p>
Copy after login


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;
}
Copy after login


The above is the entire content of this article, I hope it will be helpful to everyone's learning, and I also hope that everyone will support the PHP Chinese website.

Related recommendations:

Flex layout method of display attribute in CSS3

Use css to achieve the effect of js

Example explains the implementation of the dot effect in css

The above is the detailed content of Examples of CSS methods for using tables to implement five commonly used layouts_CSS Tutorial_CSS_Web Page Production. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template