在三围后面加操作选项,可以对明星信息进行编辑和删除操作
代码:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>7-4.简单的增删改查操作表格</title> </head> <body> <table border="1" cellspacing="0" cellpadding="5" align="center" width="80%"> <caption><h3>国内明星TOP50排行榜</h3></caption> <thead> <tr bgcolor="skyblue"> <th colspan="2">基本信息</th> <th colspan="3">三维(CM)</th> <th>操作</th> </tr> <tr align="center" bgcolor="skyblue"> <!-- <th>标签内部文本默认会加粗居中显示,非常适合做表头 --> <th>ID</th> <th>姓名</th> <th>腰围</th> <th>胸围</th> <th>臀围</th> </tr> </thead> <tbody> <tr align="center" > <td>01</td> <td>高圆圆</td> <td>88</td> <td>59</td> <td>85</td> <td><a href="">编辑</a></td> <td><a href="">删除</a></td> </tr> <tr align="center" > <td>02</td> <td>赵丽颖</td> <td>90</td> <td>60</td> <td>85</td> <td><a href="">编辑</a></td> <td><a href="">删除</a></td> </tr> <tr align="center" > <td>03</td> <td>迪丽热巴</td> <td>87</td> <td>61</td> <td>88</td> <td><a href="">编辑</a></td> <td><a href="">删除</a></td> </tr> <tr align="center" > <td>04</td> <td>古力娜扎</td> <td>86</td> <td>62</td> <td>88</td> <td><a href="">编辑</a></td> <td><a href="">删除</a></td> </tr> <tr align="center" > <td>05</td> <td>毛晓彤</td> <td>88</td> <td>68</td> <td>90</td> <td><a href="">编辑</a></td> <td><a href="">删除</a></td> </tr> </tbody> </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>
执行:
此时既要跨行合并也要跨列合并
表格里面还可以添加图片
执行:
让图片居左显示
执行:
再在标题增加一个添加操作
至此,表格的增删改查页面完成
最终源码:第2章明星排行榜top50表格
本文作者为BUG之神,转载请注明。