基于DIV+ul+li实现的表格(多示例)
本文由 www.169it.com 搜集整理
普通的显示数据的时候，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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
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
>
|
实例代码:
|
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
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实现的表格(多示例)