基于DIV+ul+li实现的表格(多示例)

本文由 www.169it.com 搜集整理

普通的显示数据的时候，ul就是项目列表，li就是列表项。可以用来显示数据。如果用于DIV＋CSS布局的话，ul+li可以替换表格的作用，具体的设置，如果宽度高度、行间距、背景边框等需要配合CSS一起设置。li是固定的宽度与高度（单元格），设置li在ul中浮动，当ul不够宽的时候，li就会自动另起一行排列（一行有多少列通过计算即可得到ul的宽度，如一行四列，一列宽100px，那ul宽就是400px加上一定的边距）。这样就实现了类似于表格的效果，或者说我们用UL+LI模拟了表格的效果。

实现过程如下:

< ul  id = "biaoge" >
     < li  class = "biaotou" >第一列 li >
     < li  class = "biaotou" >第二列 li >
     < li  class = "biaotou" >第三列 li >
     < li  class = "biaotou" >第四列 li >
     < li >数据1-1 li >
     < li >数据1-2 li >
     < li >数据1-3 li >
     < li >数据1-4 li >
     < li >数据2-1 li >
     < li >数据2-2 li >
     < li >数据2-3 li >
     < li >数据2-4 li >
     < li >数据3-1 li >
     < li >数据3-2 li >
     < li > 数据3-3 li >
     < li >数据3-4 li >
     < li >数据4-1 li >
     < li >数据4-2 li >
     < li >数据4-3 li >
     < li >数据4-4 li >
 ul >

一个无序列表biaoge，前四个列表项我们赋予了类biaotou。因为这四个项是表格头部，应该与表格数据有所区别。所以单独赋予了类，可以方便控制。下面我们开始CSS代码的编写：

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

CSS整体布局声明，边距为零，填充为零，文字大小为12px，文字颜色为黑色#000；

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

ID为biaoge的ul的CSS编码，宽度为405px（一列100px*4列+li的边距），上下边距为50px，左右为自动，实现水平居中对齐。

   

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

对各个列表项li（即单元格）进行样式定义，设置列表项预设标记为无，宽度与高度分别是100px、30px，为了让文字垂直居中于li中，设置行高为30px，文字水平居中。设置为向左浮动，并且左边距与底边距均为1px，实现了简单的表格线的效果。（如果设计成border的表格线，很多CSS HACK很难控制与调整，特别是FF中极不正常，不建议使用border来实现这类ul+li实现表格线的定义！）设置背景色为浅灰色#ccc。

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

我们设置四个“表头”li的背景色为深灰色#999，与其它的li区别开来。我们的样式定义基本就完成了。你可以在色彩上对它进行一些其它的美化。 表格类的数据最好是用表格来实现，符合WEB标准不必拘泥于完全不用表格，只是在适当的情况下，可以使用此案例的方法来实现类似于表格的布局。

实例代码1:

 < html  xmlns = "http://www.w3.org/1999/xhtml" >
 < head >
 < meta  http-equiv = "Content-Type"  content = "text/html; charset=gb2312"  />
 < title >www.webjx.com title >
 < style  type = "text/css" >
 * {
 margin:0;
 padding: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 >
 head >
 < body >
 < ul  id = "biaoge" >
 < li  class = "biaotou" >第一列 li >
 < li  class = "biaotou" >第二列 li >
 < li  class = "biaotou" >第三列 li >
 < li  class = "biaotou" >第四列 li >
 < li >数据1-1 li >
 < li > 数据1-2 li >
 < li >数据1-3 li >
 < li >数据1-4 li >
 < li >数据2-1 li >
 < li >数据2-2 li >
 < li >数据2-3 li >
 < li >数据2-4 li >
 < li >数据3-1 li >
 < li >数据3-2 li >
 < li >数据3-3 li >
 < li >数据3-4 li >
 < li >数据4-1 li >
 < li >数据4-2 li >
 < li >数据4-3 li >
 < li >数据4-4 li >
 ul >
 body >
html >

实例代码:

< html  xmlns = "http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv = "Content-Type"  content = "text/html; charset=utf-8"  />
< title >DIV+CSS表格效果 title >
< style  type = "text/css" >
* {margin:0;padding:0}
#main {margin:100px 0 0 200px}
#main ul {width:520px;height:165px;list-style:none}
#main li {border-left:1px solid #ccc;border-top:1px solid #ccc;float:left;width:102px;height:33px;text-align:center;line-height:33px}
#main li.b {border-bottom:1px solid #ccc}
#main li.r {border-right:1px solid #ccc}
style >
head >
< body >
< div  id = "main" >
< ul >
< li >11 li >
< li >11 li >
< li >11 li >
< li >11 li >
< li  class = "r" >11 li >
< li >怎么样？ li >
< li >还行吧？ li >
< li > li >
< li > li >
< li  class = "r" >11 li >
< li >上海世博 li >
< li > li >
< li > li >
< li > li >
< li  class = "r" >11 li >
< li > li >
< li > li >
< li > li >
< li > li >
< li  class = "r" >11 li >
< li  class = "b" >生活更美好 li >
< li  class = "b" > li >
< li  class = "b" > li >
< li  class = "b" > li >
< li  class = "b r" >11 li >
ul >
div >
body >
html >

• 文章来源:基于DIV+ul+li实现的表格(多示例)