HTML表格的简单使用1

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6         <style type="text/css">
  7             
  8             /*
  9              * 设置表格的宽度
 10              */
 11             table{
 12                 width: 300px;
 13                 /*居中*/
 14                 margin: 0 auto;
 15                 /*边框*/
 16                 /*border:1px solid black;*/
 17                 /*
 18                  * table和td边框之间默认有一个距离
 19                  *     通过border-spacing属性可以设置这个距离
 20                  */
 21                 /*border-spacing:0px ;*/
 22                 
 23                 /*
 24                  * border-collapse可以用来设置表格的边框合并
 25                  * 如果设置了边框合并,则border-spacing自动失效
 26                  */
 27                 border-collapse: collapse;
 28                 /*设置背景样式*/
 29                 /*background-color: #bfa;*/
 30             }
 31             
 32             /*
 33              * 设置边框
 34              */
 35             td , th{
 36                 border: 1px solid black;
 37             }
 38             
 39             /*
 40              * 设置隔行变色
 41              */
 42             tr:nth-child(even){
 43                                 // odd奇数行
 44                 background-color: #bfa;
 45             }
 46             
 47             /*
 48              * 鼠标移入到tr以后,改变颜色
 49              */
 50             tr:hover{
 51                 background-color: #ff0;
 52             }
 53             
 54             
 55         </style>
 56     </head>
 57     <body>
 58         <!--
 59             table是一个块元素
 60         -->
 61         
 62         <table>
 63             <tr>
 64                 <!--
 65                     可以使用th标签来表示表头中的内容,
 66                         它的用法和td一样,不同的是它会有一些默认效果
 67                 -->
 68                 <th>学号</th>
 69                 <th>姓名</th>
 70                 <th>性别</th>
 71                 <th>住址</th>
 72             </tr>
 73             <tr>
 74                 <td>1</td>
 75                 <td>孙悟空</td>
 76                 <td></td>
 77                 <td>花果山</td>
 78             </tr>
 79             <tr>
 80                 <td>2</td>
 81                 <td>猪八戒</td>
 82                 <td></td>
 83                 <td>高老庄</td>
 84             </tr>
 85             <tr>
 86                 <td>3</td>
 87                 <td>沙和尚</td>
 88                 <td></td>
 89                 <td>流沙河</td>
 90             </tr>
 91             <tr>
 92                 <td>4</td>
 93                 <td>唐僧</td>
 94                 <td></td>
 95                 <td>女儿国</td>
 96             </tr>
 97             <tr>
 98                 <td>1</td>
 99                 <td>孙悟空</td>
100                 <td></td>
101                 <td>花果山</td>
102             </tr>
103             <tr>
104                 <td>2</td>
105                 <td>猪八戒</td>
106                 <td></td>
107                 <td>高老庄</td>
108             </tr>
109             <tr>
110                 <td>3</td>
111                 <td>沙和尚</td>
112                 <td></td>
113                 <td>流沙河</td>
114             </tr>
115             <tr>
116                 <td>4</td>
117                 <td>唐僧</td>
118                 <td></td>
119                 <td>女儿国</td>
120             </tr>
121             <tr>
122                 <td>1</td>
123                 <td>孙悟空</td>
124                 <td></td>
125                 <td>花果山</td>
126             </tr>
127             <tr>
128                 <td>2</td>
129                 <td>猪八戒</td>
130                 <td></td>
131                 <td>高老庄</td>
132             </tr>
133             <tr>
134                 <td>3</td>
135                 <td>沙和尚</td>
136                 <td></td>
137                 <td>流沙河</td>
138             </tr>
139             <tr>
140                 <td>4</td>
141                 <td>唐僧</td>
142                 <td></td>
143                 <td>女儿国</td>
144             </tr>
145             <tr>
146                 <td>1</td>
147                 <td>孙悟空</td>
148                 <td></td>
149                 <td>花果山</td>
150             </tr>
151             <tr>
152                 <td>2</td>
153                 <td>猪八戒</td>
154                 <td></td>
155                 <td>高老庄</td>
156             </tr>
157             <tr>
158                 <td>3</td>
159                 <td>沙和尚</td>
160                 <td></td>
161                 <td>流沙河</td>
162             </tr>
163             <tr>
164                 <td>4</td>
165                 <td>唐僧</td>
166                 <td></td>
167                 <td>女儿国</td>
168             </tr>
169             <tr>
170                 <td>1</td>
171                 <td>孙悟空</td>
172                 <td></td>
173                 <td>花果山</td>
174             </tr>
175             <tr>
176                 <td>2</td>
177                 <td>猪八戒</td>
178                 <td></td>
179                 <td>高老庄</td>
180             </tr>
181             <tr>
182                 <td>3</td>
183                 <td>沙和尚</td>
184                 <td></td>
185                 <td>流沙河</td>
186             </tr>
187             <tr>
188                 <td>4</td>
189                 <td>唐僧</td>
190                 <td></td>
191                 <td>女儿国</td>
192             </tr>
193             <tr>
194                 <td>1</td>
195                 <td>孙悟空</td>
196                 <td></td>
197                 <td>花果山</td>
198             </tr>
199             <tr>
200                 <td>2</td>
201                 <td>猪八戒</td>
202                 <td></td>
203                 <td>高老庄</td>
204             </tr>
205             <tr>
206                 <td>3</td>
207                 <td>沙和尚</td>
208                 <td></td>
209                 <td>流沙河</td>
210             </tr>
211             <tr>
212                 <td>4</td>
213                 <td>唐僧</td>
214                 <td></td>
215                 <td>女儿国</td>
216 </tr> 217 </table> 218 219 </body> 220 </html> 221

 

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6     </head>
 7     <body>
 8         <!-- 
 9             表格在日常生活中使用的非常的多,比如excel就是专门用来创建表格的工具,
10                 表格就是用来表示一些格式化的数据的,比如:课程表、银行对账单
11             在网页中也可以来创建出不同的表格。    
12         -->
13         
14         <!--
15             在HTML中,使用table标签来创建一个表格
16         -->
17         <table border="1" width="40%" align="center">
18             
19             <!-- 
20                 在table标签中使用tr来表示表格中的一行,有几行就有几个tr
21             -->
22             <tr>
23                 <!-- 在tr中需要使用td来创建一个单元格,有几个单元格就有几个td -->
24                 <td>A1</td>
25                 <td>A2</td>
26                 <td>A3</td>
27                 <td>A4</td>
28             </tr>
29             
30             <tr>
31                 <td>B1</td>
32                 <td>B2</td>
33                 <td>B3</td>
34                 
35                 <!-- 
36                     rowspan用来设置纵向的合并单元格
37                 -->
38                 <td rowspan="2">B4</td>
39             </tr>
40             <tr>
41                 <td>C1</td>
42                 <td>C2</td>
43                 <td>C3</td>
44             </tr>
45             <tr>
46                 <td>D1</td>
47                 <td>D2</td>
48                 <!-- 
49                     colspan横向的合并单元格
50                 -->
51                 <td colspan="2">D3</td>
52             </tr>
53             
54         </table>
55         
56     </body>
57 </html>

 

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">/* * 设置表格的宽度 */table{width: 300px;/*居中*/margin: 0 auto;/*边框*//*border:1px solid black;*//* * table和td边框之间默认有一个距离 *通过border-spacing属性可以设置这个距离 *//*border-spacing:0px ;*//* * border-collapse可以用来设置表格的边框合并 * 如果设置了边框合并,则border-spacing自动失效 */border-collapse: collapse;/*设置背景样式*//*background-color: #bfa;*/}/* * 设置边框 */td , th{border: 1px solid black;}/* * 设置隔行变色 */tr:nth-child(even){background-color: #bfa;}/* * 鼠标移入到tr以后,改变颜色 */tr:hover{background-color: #ff0;}</style></head><body><!--table是一个块元素--><table><tr><!--可以使用th标签来表示表头中的内容,它的用法和td一样,不同的是它会有一些默认效果--><th>学号</th><th>姓名</th><th>性别</th><th>住址</th></tr><tr><td>1</td><td>孙悟空</td><td>男</td><td>花果山</td></tr><tr><td>2</td><td>猪八戒</td><td>男</td><td>高老庄</td></tr><tr><td>3</td><td>沙和尚</td><td>男</td><td>流沙河</td></tr><tr><td>4</td><td>唐僧</td><td>男</td><td>女儿国</td></tr><tr><td>1</td><td>孙悟空</td><td>男</td><td>花果山</td></tr><tr><td>2</td><td>猪八戒</td><td>男</td><td>高老庄</td></tr><tr><td>3</td><td>沙和尚</td><td>男</td><td>流沙河</td></tr><tr><td>4</td><td>唐僧</td><td>男</td><td>女儿国</td></tr><tr><td>1</td><td>孙悟空</td><td>男</td><td>花果山</td></tr><tr><td>2</td><td>猪八戒</td><td>男</td><td>高老庄</td></tr><tr><td>3</td><td>沙和尚</td><td>男</td><td>流沙河</td></tr><tr><td>4</td><td>唐僧</td><td>男</td><td>女儿国</td></tr><tr><td>1</td><td>孙悟空</td><td>男</td><td>花果山</td></tr><tr><td>2</td><td>猪八戒</td><td>男</td><td>高老庄</td></tr><tr><td>3</td><td>沙和尚</td><td>男</td><td>流沙河</td></tr><tr><td>4</td><td>唐僧</td><td>男</td><td>女儿国</td></tr><tr><td>1</td><td>孙悟空</td><td>男</td><td>花果山</td></tr><tr><td>2</td><td>猪八戒</td><td>男</td><td>高老庄</td></tr><tr><td>3</td><td>沙和尚</td><td>男</td><td>流沙河</td></tr><tr><td>4</td><td>唐僧</td><td>男</td><td>女儿国</td></tr><tr><td>1</td><td>孙悟空</td><td>男</td><td>花果山</td></tr><tr><td>2</td><td>猪八戒</td><td>男</td><td>高老庄</td></tr><tr><td>3</td><td>沙和尚</td><td>男</td><td>流沙河</td></tr><tr><td>4</td><td>唐僧</td><td>男</td><td>女儿国</td></tr></table></body></html>

 

开始在code,我的个人特色。
posted @ 2017-09-03 11:23  我所向往的美好  阅读(1095)  评论(0编辑  收藏  举报