) Div CSS layout Tutorial: Use UL and Li to implement table form

First, let's analyze how to make it: Li is a fixed width and height (cell), set Li to float in UL, when UL is not wide enough, li will automatically arrange the rows in another row (the width of UL can be calculated based on the number of columns in a row. For example, if a row has four columns and one column is px wide, UL width is PX with a certain margin ). In this way, the table-like effect is achieved, or we use ul + Li to simulate the table effect. Let's start with HTMLCodeWrite:

Example source code [Www.52css.com] <Ul id = "biaoge">
<Li class = "biaotou"> first column </LI>
<Li class = "biaotou"> second column </LI>
<Li class = "biaotou"> third column </LI>
<Li class = "biaotou"> column 4 </LI>
<Li> data 1-1 </LI>
<Li> data 1-2 </LI>
<Li> data 1-3 </LI>
<Li> data 1-4 </LI>
<Li> data 2-1 </LI>
<Li> data 2-2 </LI>
<Li> data 2-3 </LI>
<Li> data 2-4 </LI>
<Li> data 3-1 </LI>
<Li> data 3-2 </LI>
<Li> data 3-3 </LI>
<Li> data 3-4 </LI>
<Li> data 4-1 </LI>
<Li> data 4-2 </LI>
<Li> data 4-3 </LI>
<Li> data 4-4 </LI>
</Ul>

An unordered list, biaotou class, is assigned to the first four list items. Because these four items are table headers, they should be different from table data. Therefore, classes are assigned separately to facilitate control. The following describes how to write CSS code:

Example source code [Www.52css.com] *{
Margin: 0;
Padding: 0;
Font-size: 12px;
Color: #000;
}

CSS overall layout declaration. The margin is zero, the padding is zero, the text size is 12px, and the text color is black #000;

Example source code [Www.52css.com] # Biaoge {
Width: 405px;
Margin: 50px auto;
}

The ID is the ul css code of biaoge. The width is 405px (the margin of a column of 100px * 4 columns + Li), the top and bottom margin is 50px, and the left and right are automatic, enabling horizontal center alignment.

Example source code [Www.52css.com] # Biaoge Li, # biaoge Li. biaotou {
List-style-type: none;
Width: 100px;
Height: 30px;
Line-Height: 30px;
Text-align: center;
Float: left;
Margin-left: 1px;
Margin-bottom: 1px;
Background: # CCC;
}

Define the style of each list item Li (that is, cell) and set the default settings of the list item to none. The width and height are 100px and 30px respectively. In order to center the text vertically in Li, set the Row Height to 30px, and the text is horizontally centered. It is set to float to the left, and the left margin and the bottom margin are both 1px, achieving a simple table line effect. (If it is designed as a border table line, a lot of CSS hack is difficult to control and adjust, especially FF is extremely abnormal, we do not recommend using border to implement such ul + Li to define table lines !) Set the background color to light gray # CCC.

Example source code [Www.52css.com] # Biaoge Li. biaotou {
Background: #999;
}

We set the background color of the four "Header" Li to dark gray #999, which is different from other Li. The style definition is complete. You can beautify it in color.

Finally, we declare again that it is best to use tables to implement table-type data. To comply with web standards, we do not have to stick to table-type data. However, when appropriate, you can use this case to implement table-like layout,