table表格的thead、tbody和tfoot应用代码实例

  1. 云栖社区>
  2. 蚂蚁部落>
  3. 博客>
  4. 正文

table表格的thead、tbody和tfoot应用代码实例

青衫无名 2018-03-01 15:16:00 浏览925
展开阅读全文

可能很多朋友对于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">
<meta name="author" content="http://www.softwhy.com/" />
<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

本文来自云栖社区合作伙伴“蚂蚁部落”,了解相关信息可以关注蚂蚁部落

原文链接:table表格的thead、tbody和tfoot应用代码实例

网友评论

登录后评论
0/500
评论
青衫无名
+ 关注
所属团队号: 蚂蚁部落