[ 来源:http://www.it55.com | 作者: | 时间:2007-08-23 | 收藏 | 推荐 ] 【大 中 小】
在web标准没有到来之前，table以其方便实用大兴其道，用来布局、显示数据等。而现在，新的web标准虽然允许在显示数据的时候使用表格，但是在某些时候我们必须在非显示数据的情况下实现表格的效果，这就是我们今天的主题：ul、li也可以做表格。 45398 http://www.it55.com it55学习IT知识，享受IT生活 4dfkjn
我们看下面的效果：
http://www.it55.com
我们首先分析一下如何制作：li是固定的宽度与高度（单元格），设置li在ul中浮动，当ul不够宽的时候，li就会自动另起一行排列（一行有多少列通过计算即可得到ul的宽度，如一行四列，一列宽100px，那ul宽就是400px加上一定的边距）。这样就实现了类似于表格的效果，或者说我们用UL+LI模拟了表格的效果。我们开始HTML代码的编写：
| 以下为引用的内容： <ul id="biaoge">
<li class="biaotou">第一列</li> <li class="biaotou">第二列</li> <li class="biaotou">第三列</li> IT资讯之家 http://www.it55.com <li class="biaotou">第四列</li> <li>数据1-1</li> <li>数据1-2</li> <li>数据1-3</li> <li>数据1-4</li> sflj http://www.it55.com kg^&fgd <li>数据2-1</li> <li>数据2-2</li> <li>数据2-3</li> <li>数据2-4</li> <li>数据3-1</li> http://www.it55.com/ <li>数据3-2</li> <li>数据3-3</li> <li>数据3-4</li> <li>数据4-1</li> <li>数据4-2</li> 免费矢量图片素材下载http://www.it55.com <li>数据4-3</li> <li>数据4-4</li> </ul> |
一个无序列表biaoge，前四个列表项我们赋予了类biaotou。因为这四个项是表格头部，应该与表格数据有所区别。所以单独赋予了类，可以方便控制。下面我们开始CSS代码的编写：
| 以下为引用的内容： * {
margin:0; padding:0; font-size:12px; color:#000; } |
| 以下为引用的内容： #biaoge {
width:405px; margin:50px auto; } |
ID为biaoge的ul的CSS编码，宽度为405px（一列100px*4列+li的边距），上下边距为50px，左右为自动，实现水平居中对齐。
| 以下为引用的内容： |
（编辑：IT资讯之家 www.it55.com）
