效果图1：
注意点：
1，cellspadding="0" cellspacing="0" 可以让表格边框成为一条线，相当于css中表单的border-collapse:collapse属性
2，表格组颜色的选择，colgroup span="2" bgcolor="lightgreen" 表示选择两竖列背景颜色
3，small属性可以让<a>标签变小一号
实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="keywords" content="岛国女星排行榜"> <meta name="description" content="岛国女星排名"> <link ="stylesheet" type="text/css" href=".css"> <script type="text/javascript" src=".js"></script> <title>岛国女星排行榜TOP50 </title> </head> <body> <table border="1" cellpadding="0" cellspacing="0" width="400" height="150"> <caption>岛国明星TOP50排行榜<small><a href="">添加</a></small></caption> <colgroup span="2" bgcolor="lightgreen"></colgroup> <colgroup span="1" bgcolor="#D2D2D2"></colgroup> <col bgcolor="#FFFDDB"> <col bgcolor="#00FDFC"> <tr bgcolor="#8ECBE9"> <th colspan="2"> 信息</th> <th colspan="3"> 三围(cm)</th> <th colspan="2" rowspan="2">操作</th> </tr> <tr bgcolor="#8ECBE9" align="center"> <th>ID</th> <th>姓名</th> <th>腰围</th> <th>胸围</th> <th>臀围</th>s </tr> <tr> <td>01</td> <td><img src="images/bdyjy.jpg" width="30" height="30" alt="">羽野由井</td> <td>88</td> <td>59</td> <td>85</td> <td><small><a href="">编辑</a></small></td> <td><small><a href="">删除</a></small></td> </tr> <tr> <td>02</td> <td><img src="images/xzmly.jpg" width="30" height="30" alt="">小沢マリア</td> <td>90</td> <td>60</td> <td>85</td> <td><small><a href="">编辑</a></small></td> <td><small><a href="">删除</a></small></td> </tr> <tr> <td>03</td> <td><img src="images/qcll.jpg" width="30" height="30" alt="">朝川</td> <td>87</td> <td>61</td> <td>88</td> <td><small><a href="">编辑</a></small></td> <td><small><a href="">删除</a></small></td> </tr> <tr> <td>04</td> <td><img src="images/stgz.jpg" width="30" height="30" alt="">深田恭子</td> <td>87</td> <td>61</td> <td>88</td> <td><small><a href="">编辑</a></small></td> <td><small><a href="">删除</a></small></td> </tr> <tr> <td>05</td> <td><img src="images/sjk.jpg" width="30" height="30" alt="">葵</td> <td>88</td> <td>68</td> <td>90</td> <td><small><a href="">编辑</a></small></td> <td><small><a href="">删除</a></small></td> </tr> </table> <p> <a href="" title="">首页</a> <a href="" title="">上一页</a> <a href="" title="">1</a> <a href="" title="">2</a> <a href="" title="">3</a>s <a href="" title="">...</a> <a href="" title="">10</a> <a href="" title="">下一页</a> <a href="" title="">尾页</a> </p> </html> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
手稿：
效果图2：
代码：
实例
<!DOCTYPE html> <html> <meta charset="utf-8"> <meta name="keywords" content="菜单"> <meta name="description" content="办公区域规划"> <link rel="stylesheet" type="text/css" href=""> <head> <title>办公区域规划</title> </head> <body> <table border="1" cellpadding="20" cellspacing="10" width="30%" bgcolor="silver"> <caption>办公区域规划</caption> <tr> <th colspan="3"><a href="">外宾体验区</a></th> <th rowspan="6">走<br/>廊</th> </tr> <tr> <th rowspan="2">财务室</th> <td><img src="images/1.jpg" width="30" height="30">销售组1</td> <td><img src="images/2.jpg" width="30" height="30" >销售组2</td> </tr> <tr> <td><img src="images/3.jpg" width="30" height="30">销售组3</td> <td><img src="images/4.jpg" width="30" height="30">销售组4</td> </tr> <tr></tr> <tr align="center"> <th rowspan="2">微波炉室</th> <td>运维1</td> <td>运维2</td> </tr> <tr align="center"> <td>售后1</td> <td>售后2</td> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄份：
