#tb, tb1, tr, th, td { ???border: 5px solid blue; ???/*加边框*/ ???padding: 5px; ???/*内边距*/}#tb1 { ???border-collapse: collapse; ???/*合并边框*/ ???width: 500px; ???height: 500px; ???text-align: center; ???background-color: aqua;}
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>表格及轮廓</title> ???<link rel="stylesheet" href="tzy.css" type="text/css"></head><body><table id="tb"> ???<tr class="alt"> ???????<th>姓名</th> ???????<th>年龄</th> ???????<th>性别</th> ???</tr> ???<tr> ???????<td>小王</td> ???????<td>15</td> ???????<td>男</td> ???</tr> ???<tr class="alt"> ???????<td>小王</td> ???????<td>15</td> ???????<td>男</td> ???</tr> ???<tr> ???????<td>小王</td> ???????<td>15</td> ???????<td>男</td> ???</tr></table><br/><table id="tb1"> ???<tr> ???????<th>姓名</th> ???????<th>年龄</th> ???????<th>性别</th> ???</tr> ???<tr> ???????<td>小王</td> ???????<td>15</td> ???????<td>男</td> ???</tr> ???<tr> ???????<td>小王</td> ???????<td>15</td> ???????<td>男</td> ???</tr> ???<tr> ???????<td>小王</td> ???????<td>15</td> ???????<td>男</td> ???</tr></table><br/><br/><p style="outline-style: groove;outline-width: 1px">文字效果实心框</p><br/><br/><p style="outline-style: double;outline-width: 20px">文字效果双虚线框</p></body></html>
HTML学习笔记 CSS表格及轮廓案例 第八节 (原创)参考使用表
原文地址:http://www.cnblogs.com/ttzzyy/p/7512994.html