DIV CSS Page Layout Instance resolution: Implementing Tabular Form

css| Web page

This tutorial is the use of Div+css ul Li to implement the form of a method, that is, in the standard premise can be implemented form.

Table data, you should use a table to organize, not to say the production of Web-standard Web site, the table is useless, completely laid-off. Table class data, which has a unique condition, is also very convenient for organizations. This kind of data content directly uses the table to be possible.

Perhaps you think your data is not tabular data, there are other uses or your own opinion, we can also use UL, Li to achieve the layout of tabular form.

Let's first analyze how to make: Li is fixed width and height (cell), set up Li in the UL float, when the UL is not wide enough, Li will automatically another row arrangement (a row of how many columns through the calculation can get the UL width, such as a row of four columns, a column width 100px, The UL width is 400px plus a certain margin. This achieves a table-like effect, or we use Ul+li to simulate the effect of the table. We started writing HTML code:

<ul id= "Biaoge" >
<li class= "Biaotou" > First column </li>
<li class= "Biaotou" > second column </li>
<li class= "Biaotou" > third column </li>
<li class= "Biaotou" > Fourth column </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 table Biaoge, the first four list items we give the class Biaotou. Because these four items are table headers, they should be different from tabular data. So individually given the class, you can easily control. Here we begin writing CSS code:

* {
margin:0;
padding:0;
font-size:12px;
Color: #000;
}

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

#biaoge {
width:405px;
margin:50px Auto;
}

ID biaoge ul CSS encoding, width of 405px (a column of 100px*4 column +li margin), up and down margin of 50px, about automatic, to achieve horizontal center alignment.

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

For each list item Li (that is, a cell) to style definition, set list item preset marked as none, Width and height are 100px, 30px, in order to make text vertically centered in Li, set row height to 30px, text horizontally centered. It is set to float to the left, and the left and bottom margins are 1px to achieve a simple table line effect. (if designed into a border table line, many CSS hack difficult to control and adjust, especially in the FF is very abnormal, do not recommend the use of border to achieve this type of ul+li implementation of the definition of the table line!) Sets the background color to light gray #ccc.

#biaoge Li.biaotou {
Background: #999;
}

We set the background color of four "header" Li to be a dark gray #999, which distinguishes it from other li. Our style definitions are basically done. You can do some other landscaping on the color.

Finally, we declare that table class data is best implemented using tables, and web standards do not have to rigidly adhere to the table, but in appropriate cases, you can use this case method to implement a table-like layout.

Run the following code to see the demo effect:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/><title>www.webjx.com</title><style type=" Text/css ">*, margin:0; font-size:12px; Color: #000;} #biaoge {width:405px; margin:50px auto;} #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;} #biaoge Li.biaotou {background: #999;} </style></pead><body><ul id= "Biaoge" > <li class= "Biaotou" > First column </li> <li class = "Biaotou" > second column </li> <li class= "Biaotou" > third column </li> <li class= "Biaotou" > Fourth of </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></body></ Html>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]