html-3,table 表格标签 tr th td caption thead tbody tfoot 的简单使用 

 1 <!--
 2     table  border='1' style="border-collapse:collapse;"
 3             border  表格的像素宽度
 4             border-collapse:collapse 为表格设置合并边框模型
 5             tr  表格行 一个tr包含多个th 或td
 6                 th  表示居中加粗
 7                 td  表格描述（默认正常显示）
 8                 
 9             caption 标题独占一行 在表格外面
10             thead  tbody  tfoot   无论顺序是怎么写的 他会自动按这个顺序展示
11 -->
12 
13 <!DOCTYPE html>
14 <html lang="en">
15 <head>
16     <meta charset="UTF-8">
17     <title>表格标签与表单标签</title>
18 </head>
19 <body>
20 
21     <table border="2" style="border-collapse:collapse" width="150" height="50">
22         <tr>
23             <td>id</td>
24             <td>name</td>
25             <td>age</td>
26             <td rowspan="2">占两行</td>
27             <td>空列</td>
28         </tr>
29         <tr>
30             <td>1</td>
31             <td>wang</td>
32             <td>18</td>
33             <td colspan="2">占两列</td>
34         </tr>
35     </table>
36 
37     <!--
38         caption 标题独占一行 在表格外面
39         thead  tbody  tfoot   无论顺序是怎么写的 他会自动按这个顺序展示
40     -->
41     <table border="2">
42         <caption>人物介绍</caption>
43 
44          <tfoot>
45             <tr>
46                 <th>三妹</th>
47                 <td>15</td>
48                 <td>女</td>
49                 <td rowspan="3" >占三行</td>
50             </tr>
51         </tfoot>
52 
53         <thead>
54             <tr>
55                 <th>大哥</th>
56                 <td>18</td>
57                 <td>男</td>
58             </tr>
59         </thead>
60 
61         <tbody>
62             <tr>
63                 <th>老二</th>
64                 <td>17</td>
65                 <td>男</td>
66             </tr>
67         </tbody>
68     </table>
69 
70 </body>
71 </html>

 

posted on 2018-09-17 17:23  _AlexWang  阅读(625)  评论(0)    收藏  举报

导航