html如何实现表格效果,DIV+CSS技术实现类似table表格的效
html网页设计 table 果
当前位置：⽹站⾸页 >> ⽹站技术 >>
DIV+CSS技术实现类似table表格的效果
【发布⼈：站长之家    发布⽇期：2015-04-03】
表格在⽹页制作中使⽤⾮常⼴泛，是显⽰序列组合数据的主要形式之⼀。DIV+CSS虽然在制作⽹页中有其独到的优势，相⽐table制作⽹页有更简短的代码，然⽽在实现某些表格时却并没有table实现起来更直观⽅便。其实使⽤DIV+CSS技术也可以实现类似table表的效果，站长们可以使⽤常见的ul和li来实现表格中的单元格，表格如果带有边框，则站长可以设置li元素的border-top、border-left、border-left、border-right四个边框来设置表格单元格的边框，包括边框的颜⾊和粗细都可以⾃定义。下⾯，站长之家在多个浏览器中测试了⼀个使⽤DIV+CSS技术实现类似table表效果的实例，并带有实例运⾏的图⽚截图，来说明如何使⽤DIV+CSS技术来实现表格的效果。
下⾯就将使⽤DIV+CSS技术实现的类似table效果的实例代码展⽰在下⾯，并附上实例图⽚。本实例在多个浏览器包括IE、Chrome、360浏览器等浏览器下测试通过运⾏显⽰正常。
DIV+CSS实现类似table表格的效果
.divclass { width: 450px; height:200; border-top: #000 1px solid; border-left: #000 1px solid; }
.divclass ul { list-style:none; margin:0; padding:0; width: 450px; margin: 0px; }
.divclass ul li { float: left; width: 149px; height: 49px; list-style-type: none; border-right:#000 1px solid; border-bottom: #000 1px solid; text-align: center; line-height: 50px;}
00000
11111
22222
33333
44444
55555
66666
77777
88888
99999
下⾯的图⽚是本实例代码执⾏的结果图⽰，从图中可以看到使⽤DIV+CSS实现的表格效果绝不亚于使⽤table实现的表格效果。其实现起来的代码也很简单明了。各位站长们可以结合图⽚来更好地理解实例代码。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。