<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>商品详情</title> </head> <body> <table border="1" cellspacing="0" cellpadding="5" width="80%"> <!-- border 属性规定规定围绕表格的边框的宽度。 cellspacing 属性规定单元格之间的空间。 cellpadding 属性规定单元边沿与其内容之间的空白。 align 属性规定表格相对于周围元素的对齐方式。CSS 语法:<table style="float:right"> bgcolor 属性规定规定表格的背景颜色。CSS 语法:<table style="background-color:red"> width 属性规定表格的宽度。 --> <caption><h3> 商品资料一览表     <small><a href="">新增</a></small></h3></caption> <!-- caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。 thead,tboday,tfoot,仅仅是一个分区的标识,没有任何样式,和DIV一样仅仅是为了可读性强。 --> <thead> <tr bgcolor="skyblue"> <th colspan="2">基本信息</th> <th colspan="4">商品详情</th> <th colspan="2" rowspan="2">商品操作信息</th> </tr> <tr bgcolor="skyblue"> <th>商品条码</th> <th>商品名称</th> <th>长(CM)</th> <th>宽(CM)</th> <th>高(CM)</th> <th>价格</th> </tr> </thead> <tbody> <tr> <td>6914068019529</td> <td><img src="../images/11.jpg" alt="纸巾" width="25">洁柔可湿水面巾纸</td> <td>15</td> <td>12</td> <td>8</td> <td>23.8</td> <td>编辑</td> <td>删除</td> </tr> <tr> <td>6914068019521</td> <td><img src="../images/12.jpg" alt="纸巾" width="25">泉林本色 不漂白食品级本色纸 3层280节*27卷</td> <td>25</td> <td>20</td> <td>12</td> <td>38.8</td> <td>编辑</td> <td>删除</td> </tr> <tr> <td>6914068019522</td> <td><img src="../images/13.jpg" alt="纸巾" width="25">清风(APP)抽纸 柔韧2层200抽软抽*20包纸巾</td> <td>45</td> <td>28</td> <td>18</td> <td>68.9</td> <td>编辑</td> <td>删除</td> </tr> <tr> <td>6914068019523</td> <td><img src="../images/14.jpg" alt="纸巾" width="25">洁柔抽纸 活力阳光橙 3层120抽面巾纸*24包</td> <td>43</td> <td>26</td> <td>18</td> <td>89.2</td> <td>编辑</td> <td>删除</td> </tr> <tr> <td>6914068019524</td> <td><img src="../images/15.jpg" alt="纸巾" width="25">洁柔卷纸 加量倍柔3层280节卫生纸*27卷</td> <td>65</td> <td>32</td> <td>28</td> <td>88.8</td> <td>编辑</td> <td>删除</td> </tr> <tr> <td>6914068019525</td> <td><img src="../images/16.jpg" alt="纸巾" width="25">清风(APP)抽纸 原木纯品金装系列 3层150抽软抽*20包纸巾</td> <td>25</td> <td>20</td> <td>18</td> <td>38</td> <td>编辑</td> <td>删除</td> </tr> </tbody> </table> </body> </html>
效果图:
作业抄写两边 :(