Home > Developer > JavaScript
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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
