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>css
- 1. html---表格和表單的使用
- 2. HTML 表格與表單 我的簡歷
- 3. table表格簡單使用
- 4. html的表格的簡單操作
- 5. html我的信息採集表格的簡單使用
- 6. HTML 表格的使用
- 7. [Xcode 實際操做]5、使用表格-(1)使用UITableView製做簡單表格
- 8. html經常使用標籤表單和表格等及css的簡單入門
- 9. HTML—表格、列表、表單
- 10. HTML中表格和表單的簡單構造和樣式
- 更多相關文章...
- • ASP.NET Web Pages - HTML 表單 - ASP.NET 教程
- • ASP.NET Web Forms - HTML 表單 - ASP.NET 教程
- • Git可視化極簡易教程 — Git GUI使用方法
- • TiDB 在摩拜單車在線數據業務的應用和實踐
-
每一个你不满意的现在，都有一个你没有努力的曾经。