HTML 5--Creating Tables

Basic Structure of a table :

1.Body

2.Header

3.Footer

示例代码：

 1 <html>
 2         <body>
 3         <table cellpadding="0">
 4         <thead>
 5         <tr>
 6         <td>学号</td><td>姓名</td><td>性别</td>
 7         <td>年龄</td><td>体重</td><td>专业</td>
 8     </tr>
 9         </thead>
10         <tbody>
11         <tr><td>001</td><td>张三男</td><td>男</td><td>1</td><td>34</td><td>计算机</td></tr>
12         <tr><td>002</td><td>里斯</td><td>男</td><td>2</td><td>23</td><td>软件</td></tr>
13         <tr><td>003</td><td>三男</td><td>女</td><td>3</td><td>12</td><td>计算机</td></tr>
14         <tr><td>004</td><td>张男</td><td>男</td><td>56</td><td>34</td><td>计算机</td></tr>
15         <tr><td>005</td><td>汪斯</td><td>男</td><td>34</td><td>23</td><td>软件</td></tr>
16         <tr><td>006</td><td>三个</td><td>女</td><td>12</td><td>12</td><td>计算机</td></tr>
17     </tbody>
18     <tfoot>
19     <tr>
20     <td colspan="3">总人数</td>
21     <td colspan="3">6人</td>
22     </tr>
23     </tfoot>
24         </table>
25             
26         </body>
27 </html>

View Code

测试结果;

2.增加标题：

<caption>兴趣小组名单</caption>

示例代码：

 1 <html>
 2         <body>
 3         <table cellpadding="0">
 4         <caption>兴趣小组名单</caption>
 5         <thead>
 6         <tr>
 7         <td>学号</td><td>姓名</td><td>性别</td>
 8         <td>年龄</td><td>体重</td><td>专业</td>
 9     </tr>
10         </thead>
11         <tbody>
12         <tr><td>001</td><td>张三男</td><td>男</td><td>1</td><td>34</td><td>计算机</td></tr>
13         <tr><td>002</td><td>里斯</td><td>男</td><td>2</td><td>23</td><td>软件</td></tr>
14         <tr><td>003</td><td>三男</td><td>女</td><td>3</td><td>12</td><td>计算机</td></tr>
15         <tr><td>004</td><td>张男</td><td>男</td><td>56</td><td>34</td><td>计算机</td></tr>
16         <tr><td>005</td><td>汪斯</td><td>男</td><td>34</td><td>23</td><td>软件</td></tr>
17         <tr><td>006</td><td>三个</td><td>女</td><td>12</td><td>12</td><td>计算机</td></tr>
18     </tbody>
19     <tfoot>
20     <tr>
21     <td colspan="3">总人数</td>
22     <td colspan="3">6人</td>
23     </tr>
24     </tfoot>
25         </table>
26             
27         </body>
28 </html>

View Code

3.设置表样式：

1.创建table.css文件；

2.在html文件中调用table.css文件:

(1)table.css:

 1 table{
 2 background-color:#FFF;
 3     border:none;
 4     color:#565;
 5         font:14px arial;
 6         tetx-align:left;
 7         margin: auto;
 8 }
 9 table caption {
10 
11         font-size: 24px;
12         border-bottom:2px solid #B3DE94;
13     border-top:2px solid #B3DE94;
14         
15 }
16 
17 tbody tr{
18 background-color:#ccc;
19 
20 }
21 
22 thead tr,tfoot tr{
23 background-color:white;
24 }
25 
26 
27 td,th{
28 width :90px;
29 padding:5px;
30 border :2px solid #EEE;<!--加边框-->
31 <!--在右侧和下册加边框-->
32 border-bottom-color:#666;
33 border-right-color:#666;
34 
35 }
36 
37   <!--将偶数行调整为AAA-->
38 tbody tr.even {
39 background-color:#AAA;
40 
41 }
42 
43 <!--某行被点击到之后变成高亮色-->
44 tbody tr:hover td,tbody tr:hover th{
45 background-color:aqua;
46 border :2px solid aqua;
47 
48 }

View Code

(2)在html文件中写入代码：

 1 <html>
 2     <head>
 3         <link href="table.css " type="text/css" rel="stylesheet"/>
 4     </head>
 5         <body>
 6         <table cellpadding="0">
 7         <caption>兴趣小组名单</caption>
 8         <thead>
 9         <tr>
10         <td>学号</td><td>姓名</td><td>性别</td>
11         <td>年龄</td><td>体重</td><td>专业</td>
12     </tr>
13         </thead>
14         <tbody>
15         <tr><td>001</td><td>张三男</td><td>男</td><td>1</td><td>34</td><td>计算机</td></tr>
16         <tr class="even"><td>002</td><td>里斯</td><td>男</td><td>2</td><td>23</td><td>软件</td></tr>
17         <tr><td>003</td><td>三男</td><td>女</td><td>3</td><td>12</td><td>计算机</td></tr>
18         <tr  class="even"><td>004</td><td>张男</td><td>男</td><td>56</td><td>34</td><td>计算机</td></tr>
19         <tr><td>005</td><td>汪斯</td><td>男</td><td>34</td><td>23</td><td>软件</td></tr>
20         <tr  class="even"><td>006</td><td>三个</td><td>女</td><td>12</td><td>12</td><td>计算机</td></tr>
21     </tbody>
22     <tfoot>
23     <tr>
24     <td colspan="3">总人数</td>
25     <td colspan="3">6人</td>
26     </tr>
27     </tfoot>
28         </table>
29             
30         </body>
31 </html>

View Code

测试结果：

测试结果中表格的高亮显示和条纹间隔还存在问题？？？？？？？？？？