h5学习笔记 Table

最新推荐文章于 2024-09-10 12:58:32 发布

传说中的贫民窟

最新推荐文章于 2024-09-10 12:58:32 发布

阅读量837

点赞数

本文链接：https://blog.csdn.net/truhfcg/article/details/83831343

版权

本文是关于HTML5中Table的学习笔记，强调了`border-collapse: collapse;`样式用于去除双重边框，以及如何通过`colspan`属性合并单元格。还提到了`thead`, `tbody`, `tfoot`在表格中的作用，以及使用CSS选择器`.mytable tr:nth-child(2n)`实现间隔颜色效果。同时推荐了一篇人工智能教程。" 107158932,8768420,使用SQL查询DB2中的XML数据,"['数据库', 'SQL', 'XML处理', 'DB2', '数据查询']

摘要由CSDN通过智能技术生成

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

这里写图片描述

编写一个表格作为练习。当中有个比较重要的样式在学习过程中遇到，border-collapse: collapse; 能够去除双重的边框。table可以合并单元格所以对td属性设置 colspan=”2” 则代表可以设置单元格。

table 当中thead， tbody， tfoot 都是table元素。使用thead代表表头，这个标签好处的无需关系位置。同样tfoot 也一样。

.mytable tr:nth-child(2n) 为隔开选取，这样就能够间隔地处理错开的颜色。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>Table 练习</title>    </head>    <style>        .mytable        {            width: 800px;            height: auto;            margin: 0 auto;        }        .mytable table        {            width: 100%;            border: 1px solid #999;            padding: 0;            margin: 0;            border-collapse: collapse;        }        .mytable th        {            height: 45px;            line-height: 45px;            text-align: center;            border-bottom: 1px solid #999;            padding: 0;            margin: 0;        }        .mytable td        {            height: 45px;            line-height: 45px;            text-align: center;            border-bottom: 1px solid #999;            padding: 0;            margin: 0;        }        .mytable tr:hover        {            background-color: #f8f8f8;        }        .mytable tr:nth-child(2n)        {            background-color: #f8f8f8;        }        .mytable tfoot        {            width: 100%;        }        .mytable  tfoot a{            text-decoration: none;            color: #999;        }    </style>    <body><div class="mytable">    <table>        <thead>            <tr>                <th>姓名</th>                <th>性别</th>                <th>电话</th>                <th>地址</th>            </tr>        </thead>        <tbody>            <tr>                <td>小米</td>                <td>未知</td>                <td>1234567</td>                <td>火星文明</td>            </tr>            <tr>                <td>华为</td>                <td>未知</td>                <td>1234567</td>                <td>火星文明</td>            </tr>            <tr>                <td>三星</td>                <td>未知</td>                <td>1234567</td>                <td>火星文明</td>            </tr>            <tr>                <td>苹果</td>                <td>未知</td>                <td>1234567</td>                <td>火星文明</td>            </tr>        </tbody>        <tfoot>               <tfoot>                <tr>                                     <td><a href="#" class="more">上一页</a></td>                    <td colspan="1"><a href="#" class="more">下一页</a></td>                    <td colspan="2"></td>                </tr>              </tfoot>        </tfoot>            </table></div>    </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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119