html如何实现表格效果,DIV+CSS技术实现类似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实现的表格效果。其实现起来的代码也很简单明了。各位站长们可以结合图片来更好地理解实例代码。