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

编程入门行业动态更新时间:2024-10-27 20:31:50

基于DIV+ul+li实现的表格(多<a href=https://www.elefans.com/category/jswz/34/1770116.html style= 示例)"/>

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

本文由 www.169it 搜集整理

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

实现过程如下:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 < 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代码的编写：

1 2 3 4 5 6 * { margin : 0 ; padding : 0 ; font-size : 12px ; color : #000 ; }　　

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

1 2 3 4 #biaoge { width : 405px ; margin : 50px auto ; }　　

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

1 2 3 4 5 6 7 8 9 10 11 #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。

1 2 3 #biaoge li.biaotou { background : #999 ; }　　

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

实例代码1:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd"> < html xmlns = "" > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=gb2312" /> < title >www.webjx</ 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 >

实例代码:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd"> < html xmlns = "" > < 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 >