今天帶了一篇簡短的教程,用CSS的UL LI制作實現一個表格,以往聽說CSS實現表格並不好,還不如直接用傳統的TABLE來實現,其實我不這麼認為,如果你CSS非常熟練了,用CSS來實現表格同樣很省事,不信就看一下這個代碼吧:
01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN">
02
<
Html
>
03
<
head
>
04
<
title
>用CSS的UL LI實現表格布局</
title
>
05
</
head
>
06
<
style
>
07
*{margin: 0 auto;padding: 0px;list-style: none;}
08
.e{width: 500px;border-top: solid #f00 1px;border-left: 1px solid #f00;display: table;margin-top: 50px;}/*定義表格區域大小和邊框等參數*/
09
li{float: left;}/*一定要記著讓LI向左浮動,這樣後邊的才會自動跟進*/
10
.id,.name,.x,.z,.d{color: #999;font-size: 12px;text-align: center;border-right: 1px solid #f00;border-bottom: 1px solid #f00;height: 22px;line-height: 22px;}/*定義表格表頭等*/
11
.id{width: 20px;}
12
.name{width: 50px;}
13
/*以下定義表格每列的寬度*/
14
.x{width: 30px;}
15
.z{width: 30px;}
16
.d{width: 365px;}
17
</
style
>
18
<
body
>
19
<
div
class
=
"e"
>
20
<
ul
>
21
<
li
class
=
"id"
>ID</
li
>
22
<
li
class
=
"name"
>名字</
li
>
23
<
li
class
=
"x"
>性別</
li
>
24
<
li
class
=
"z"
>年齡</
li
>
25
<
li
class
=
"d"
>地址</
li
>
26
</
ul
>
27
<
ul
>
28
<
li
class
=
"id"
>1</
li
>
29
<
li
class
=
"name"
>本山</
li
>
30
<
li
class
=
"x"
>女</
li
>
31
<
li
class
=
"z"
>22</
li
>
32
<
li
class
=
"d"
>北京</
li
>
33
</
ul
>
34
<
ul
>
35
<
li
class
=
"id"
>2</
li
>
36
<
li
class
=
"name"
>小曾</
li
>
37
<
li
class
=
"x"
>男</
li
>
38
<
li
class
=
"z"
>26</
li
>
39
<
li
class
=
"d"
>上海</
li
>
40
</
ul
>
41
</
body
>
42
</
Html
>
最後來看下表格的效果,還不錯吧,而且兼容火狐、Chrome等浏覽器。