【HTML】03-表格

 1、表格基本标签

 1 表格标签：
 2   <!-- table表示表格的整体 -->
 3   <!-- tr表示表格的每一行 -->
 4   <!-- td表示表格的单元格 -->
 5   <table>
 6     <tr>
 7       <td>姓名</td>
 8       <td>成绩</td>
 9       <td>评语</td>
10     </tr>
11     <tr>
12       <td>小哥哥</td>
13       <td>100分</td>
14       <td>小哥哥真帅气</td>
15     </tr>
16     <tr>
17       <td>小姐姐</td>
18       <td>100分</td>
19       <td>小姐姐真漂亮</td>
20     </tr>
21     <tr>
22       <td>总结</td>
23       <td>郎才女貌</td>
24       <td>郎才女貌</td>
25     </tr>
26   </table>

 

2、表格的相关属性

 1   <!-- border:表格的边框 -->
 2   <!-- width:表格的宽度 -->
 3   <!-- height:表格的高度 -->
 4   <table border="1" width="300" height="300">
 5     <tr>
 6       <td>姓名</td>
 7       <td>成绩</td>
 8       <td>评语</td>
 9     </tr>
10     <tr>
11       <td>小哥哥</td>
12       <td>100分</td>
13       <td>小哥哥真帅气</td>
14     </tr>
15     <tr>
16       <td>小姐姐</td>
17       <td>100分</td>
18       <td>小姐姐真漂亮</td>
19     </tr>
20     <tr>
21       <td>总结</td>
22       <td>郎才女貌</td>
23       <td>郎才女貌</td>
24     </tr>
25   </table>

 

3、表格的标题和头

 1   <!-- caption：表格整体的大标题 -->
 2   <!-- th：表头单元格，表格一列的小标题 -->
 3   <table border="1" width="300" height="300">
 4     <caption><h3>学生成绩单</h3></caption>
 5     <tr>
 6       <th>姓名</th>
 7       <th>成绩</th>
 8       <th>评语</th>
 9     </tr>
10     <tr>
11       <td>小哥哥</td>
12       <td>100分</td>
13       <td>小哥哥真帅气</td>
14     </tr>
15     <tr>
16       <td>小姐姐</td>
17       <td>100分</td>
18       <td>小姐姐真漂亮</td>
19     </tr>
20     <tr>
21       <td>总结</td>
22       <td>郎才女貌</td>
23       <td>郎才女貌</td>
24     </tr>
25   </table>

 

4、表格的结构标签

 1   <!-- thead：表示表格的头部 -->
 2   <!-- tbody：表示表格的主体 -->
 3   <!-- tfoot：表示表格的底部 -->
 4   <table border="1" width="300" height="300">
 5     <caption><h3>学生成绩单</h3></caption>
 6     <!-- 表格的头部 -->
 7     <thead>
 8       <tr>
 9         <th>姓名</th>
10         <th>成绩</th>
11         <th>评语</th>
12       </tr>
13     </thead>
14     <!-- 表格的身体 -->
15     <tbody>
16       <tr>
17         <td>小哥哥</td>
18         <td>100分</td>
19         <td>小哥哥真帅气</td>
20       </tr>
21       <tr>
22         <td>小姐姐</td>
23         <td>100分</td>
24         <td>小姐姐真漂亮</td>
25       </tr>
26     </tbody>
27     <!-- 表格的底部 -->
28     <tfoot>
29       <tr>
30         <td>总结</td>
31         <td>郎才女貌</td>
32         <td>郎才女貌</td>
33       </tr>
34     </tfoot>
35   </table>

 

5、表格的合并单元格

 1 rowspan 和 colspan
 2 <table border="1" width="300" height="300">
 3     <caption><h3>学生成绩单</h3></caption>
 4     <!-- 表格的头部 -->
 5     <thead>
 6       <tr>
 7         <th>姓名</th>
 8         <th>成绩</th>
 9         <th>评语</th>
10       </tr>
11     </thead>
12     <!-- 表格的身体 -->
13     <tbody>
14       <tr>
15         <td>小哥哥</td>
16         <!-- 保留 -->
17         <td rowspan="2">100分</td>
18         <td>小哥哥真帅气</td>
19       </tr>
20       <tr>
21         <td>小姐姐</td>
22         <!-- 删除 -->
23         <!-- <td>100分</td> -->
24         <td>小姐姐真漂亮</td>
25       </tr>
26     </tbody>
27     <!-- 表格的底部 -->
28     <tfoot>
29       <tr>
30         <td>总结</td>
31         <!-- 保留 -->
32         <td colspan="2">郎才女貌</td>
33         <!-- 删除 -->
34         <!-- <td>郎才女貌</td> -->
35       </tr>
36     </tfoot>
37   </table>

 

 单元格相邻的边框合并

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6   <title>Document</title>
 7   <style>
 8 
 9   table{
10     width: 500px;
11     height: 600px;
12   }
13 
14   table, tr, td {
15     border: 1px solid #000;
16     /* 合并相邻的边框 */
17     border-collapse: collapse;
18   }
19 
20   /* 偶数行背景变色   even  等同于直接写  2n  */
21   td:nth-child(even) {
22     background-color: pink;
23   }
24 
25     /* 奇数行背景变色   odd  等同于直接写  2n+1  */
26     td:nth-child(odd) {
27     background-color: #033;
28   }
29 
30   </style>
31 </head>
32 <body>
33   <table>
34     <tr>
35       <td>内</td>
36       <td>内</td>
37       <td>内</td>
38       <td>内</td>
39     </tr>
40     <tr>
41       <td>内</td>
42       <td>内</td>
43       <td>内</td>
44       <td>内</td>
45     </tr>
46     <tr>
47       <td>内</td>
48       <td>内</td>
49       <td>内</td>
50       <td>内</td>
51     </tr>
52   </table>
53 </body>
54 </html>

 

posted @ 2021-12-18 21:09  为你编程  阅读(78)  评论(0)    收藏  举报