首页 > 开发 > CSS > 正文

DIVCSS布局教程:应用ul、li实现表格形式

2024-07-11 08:40:35
字体:
来源:转载
供稿:网友


  昨天在MB5U.com的留言板,有一位朋友在呐喊:用DIV的UL LI要如何实现表格的那种形式啊?
  我感觉挺纳闷,表格的数据,就应该使用表格来组织,不是说制作符合WEB标准的网站,表格就一无是处、彻底下岗了。表格类的数据,它有着得天独厚的条件,也非常方便组织。这类数据内容直接使用表格就可以了。

  或许你认为你的数据并不是表格式的数据,还有着其它的用法或你自己的见解,我们也可以用ul、li来实现表格形式的布局。我们看下面的效果:


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

示例代码 [www.CuoXIn.com]
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表