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>
