在线演示：http://111.231.88.20/front/html/0316/7.html
以下为html代码
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>7-1.表格的基本属性</title> </head> <body> <!-- 1.创建表格使用的<table>标签 2.创建表格的基本步骤：先写行，再写列（单元格） 3.用户数据全部保存在单元格中的 4.<table>下面的子标签：<tr>行，<td>列、单元格，<th>用在表头的单元格 5.<caption>表格标题</caption> --> <table border="1" cellspacing="0" cellpadding="5" align="center" width="500"> <!-- 设置表格的边框，间隙，内边距，内容居中还有宽度 --> <caption><h3>会员管理列表<small><a href="#"> 添加用户</a></small></h3></caption> <!-- thead，tbody，tfoot仅仅是一个分区标识，没有任何样式 --> <thead bgcolor="lightyellow"> <tr> <th colspan="3">用户信息</th> <th colspan="2">联系方式</th> <th colspan="2" rowspan="2">操作</th> </tr> <tr> <th>ID</th> <th>用户名</th> <th>推荐人</th> <th>QQ</th> <th>邮箱</th> </tr> </thead> <tbody> <tr align="center"> <td>1</td> <td>小猪头</td> <td>无</td> <td><a href="#"><img src="../images/qq.gif" alt="QQ" title="点击联系QQ"></a></td> <td>1234567@qq.com</td> <td><a href="#">修改</a></td> <td><a href="#">删除</a></td> </tr> <tr align="center"> <td>2</td> <td>小毛头</td> <td>小猪头</td> <td><a href="#"><img src="../images/qq.gif" alt="QQ" title="点击联系QQ"></a></td> <td>3456789@qq.com</td> <td><a href="#">修改</a></td> <td><a href="#">删除</a></td> </tr> <tr align="center"> <td>3</td> <td>小鱼头</td> <td>小毛头</td> <td><a href="#"><img src="../images/qq.gif" alt="QQ" title="点击联系QQ"></a></td> <td>4567890@qq.com</td> <td><a href="#">修改</a></td> <td><a href="#">删除</a></td> </tr> <tr align="center"> <td>4</td> <td>小兔头</td> <td>小猪头</td> <td><a href="#"><img src="../images/qq.gif" alt="QQ" title="点击联系QQ"></a></td> <td>5678900@qq.com</td> <td><a href="#">修改</a></td> <td><a href="#">删除</a></td> </tr> <tr align="center"> <td>5</td> <td>小鸭头</td> <td>小兔头</td> <td><a href="#"><img src="../images/qq.gif" alt="QQ" title="点击联系QQ"></a></td> <td>6781119@qq.com</td> <td><a href="#">修改</a></td> <td><a href="#">删除</a></td> </tr> </tbody> <tfoot> <!-- 当前表格尾部为空 --> </tfoot> </table> <p align="center"> <a href="#">首页</a> <a href="#">上一页</a> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">...</a> <a href="#">下一页</a> <a href="#">尾页</a> </p> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
以下为手抄代码，由于纸张大小问题，省略了一小部分
第一遍
第二遍
