?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来表示表格中的一行，有几行就有几个tr21 ????????????-->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>
HTML表格的简单使用1
原文地址：http://www.cnblogs.com/fuck1/p/7469132.html