(转)DIV CSS布局教程：应用ul、li实现表格形式_html/css_WEB-ITnose

　　我们首先分析一下如何制作：li是固定的宽度与高度（单元格），设置li在ul中浮动，当ul不够宽的时候，li就会自动另起一行排列（一行有多少列通过计算即可得到ul的宽度，如一行四列，一列宽100px，那ul宽就是400px加上一定的边距）。这样就实现了类似于表格的效果，或者说我们用UL+LI模拟了表格的效果。我们开始HTML代码的编写：

 Example Source Code [www.52css.com]

    
• 第一列

    
• 第二列

    
• 第三列

    
• 第四列

    
• 数据1-1

    
• 数据1-2

    
• 数据1-3

    
• 数据1-4

    
• 数据2-1

    
• 数据2-2

    
• 数据2-3

    
• 数据2-4

    
• 数据3-1

    
• 数据3-2

    
• 数据3-3

    
• 数据3-4

    
• 数据4-1

    
• 数据4-2

    
• 数据4-3

    
• 数据4-4

 Example Source Code [www.52css.com]

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

 Example Source Code [www.52css.com]

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

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

Example Source Code [www.52css.com]

#biaoge li.biaotou {
    background:#999;
}