Differences between table layout and Div + CSS layout: divcss

Source: Internet
Author: User

Differences between table layout and Div + CSS layout: divcss

(1) table layout

Table layout is easy to master and convenient. However, the table layout needs to fill in the spacing between layout sections through the table spacing or using transparent GIF images. In this way, a large amount of codes that are difficult to read and maintain are generated in the layout pages; in addition, the page layout of a table can only display all the content after the entire table is downloaded. The browsing speed of all the tables is slow [2].

(2) CSS + DIV Layout

To achieve a more accurate and adaptive layer layout, you need to set the style of the layer, that is, use CSS to control the position of the layer. The CSS + DIV layout uses Div to locate the plates, and controls the plate spacing through attributes such as Div border (border), padding (padding), margin (border), and Float (floating, the specific implementation is to create a Div tag and apply CSS to it

[3] positioning and floating attributes.

CSS + DIV layout requires writing a lot of CSS style code to control the DIV layers of each layout. Therefore, it is more difficult to master the layout than the table layout. However, the CSS + DIV layout is more flexible and practical than the table layout. After the website layout is completed, the layout structure of the website can be easily adjusted. In addition, the DIV layers of the CSS + DIV layout can be downloaded and displayed in sequence, therefore, the access speed is relatively high.

[4] grid layout is fast.

 

Table layout web page instance

 

The following figure shows the code for a Web page with a table layout: [5]. <Html>

 

<Title> table layout </title>

 

<Table width = "900" height = "280" border = "0" align = "center" cellpadding = "0" cellspacing = "0">

 

<Tr>

 

<Td height = "82" colspan = "2"> </td> </tr>

 

<Tr>

 

<Td height = "32" colspan = "2"> </td> </tr>

 

<Tr>

 

<Td width = "190" height = "618"> </td> <td width = "710"> </td>

 

</Tr>

 

<Tr>

 

<Td height = "64" colspan = "2"> </td> </tr> </table> </body>

 CSS + DIV layout web page instance

<Style type = "text/css"> <! -- Body {

Text-align: center ;}# container {

Position: relative;

Background-color: #00FF00;

Margin-top: 0px;

Margin-right: auto;

Margin-bottom: 0px;

Margin-left: auto;

Height: 765px;

Width: 900px;

Text-align: left ;}# header {

Position: relative;

Background-color: # FF0000;

Height: 82px;

Width: 900px;

Text-align: left ;}# links {

Position: relative;

Background-color: # FF9900;

Height: 32px;

Width: 900px;

Text-align: left ;}# left {

Position: relative;

Background-color: # FFFF66;

Height: 618px;

Width: pixel PX;

Text-align: left;

Float: right ;}# main {

Position: relative;

Background-color: #00 FFFF;

Height: 618px;

Width: 710px;

Text-align: left;

Float: left ;}# footer {

Position: relative;

Background-color: # FF00FF;

Height: 64px;

Width: 900px;

Text-align: left;

Float: left;} --> </style>

<Div id = "header"> </div>

<Div id = "links"> </div>

<Div id = "left"> </div>

<Div id = "main"> </div>

<Div id = "footer"> </div> </body>

Code Description:

(1) The Code contains six div labels, representing six layers respectively. The id of the outermost layer is the div of the iner.

[7] serves as a container to accommodate the other five layers.

(2) The selector body and # container style are used to horizontally center the div (container layer) with the outermost layer id as container.

(3) Other selector styles such as # header, # links, # left, # main and # footer are used to control the display of the five layers in the container respectively.

(4) selector # left and # main have an important CSS attribute float. Set the selector # left to float: left, And the selector # main to float: right. This property sets the layer with id left to show on the left, and the layer with id main to show on the right.

(5) If you want to change the id to the left and main layers, you only need to set float: right in the selector # left, and set float: left in the selector # main.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.