可能很多朋友对于table标签的使用比较熟悉,但是对于thead、tbody和tfoot不够熟悉,因为不使用这三个标签基本上不影响使用,其实如果能够合理的使用这三个标签,可以是对表格的操作或者美化更为轻松便捷,下面就是一段使用上述三个标签的代码实例和大家分享一下,希望能够给需要的朋友带来一定的帮助,代码如下:
01
02
03
04
05
06
07
08
09
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><
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>蚂蚁部落</
title
>
<
style
type
=
"text/css"
>
.table{
width:300px;
height:100px;
border:1px solid #ccc;
border-collapse:collapse;
}
.table td, .table th{
border:1px solid #ccc;
padding:5px;
}
.table tfoot{color:red}
</
style
>
</
head
>
<
body
>
<
table
class
=
"table"
>
<
thead
>
<
tr
>
<
th
>考试科目</
th
>
<
th
>相关分数</
th
>
</
tr
>
</
thead
>
<
tbody
>
<
tr
>
<
td
>计算机数学</
td
>
<
td
>80</
td
>
</
tr
>
<
tr
>
<
td
>操作系统</
td
>
<
td
>85</
td
>
</
tr
>
</
tbody
>
<
tfoot
>
<
tr
>
<
td
>总分数</
td
>
<
td
>165</
td
>
</
tr
>
</
tfoot
>
</
table
>
</
body
>
</
html
>
|
上面的代码演示了三个标签的的用法,用三个标签将table表格的三个功能区域分隔,非常便于对于相关内容进行设置样式和进行其他不同的操作,更多内容可以参阅相关阅读。
原文发布时间为:2017-2-17
本文作者:admin
本文来自云栖社区合作伙伴“蚂蚁部落”,了解相关信息可以关注蚂蚁部落