HTML表格的簡單使用1

時間 2019-12-08

標籤 html 表格簡單使用欄目 HTML 简体版

原文原文鏈接

  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><tr><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>css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。