作业内容:写一个商品信息表,要求有id,品名,价格,数量,金额等字段, 最后要有合计,如总数, 总金额,并且商品按品类进行合并显示,要求用到行与列的合并, 别怕失败,多写几次,就对表格的编写就熟练了。

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>
<!-- 写一个商品信息表,要求有id,品名,价格,数量,金额等字段, 最后要有合计,如总数, 总金额,并且商品按品类进行合并显示,要求用到行与列的合并, 别怕失败,多写几次,就对表格的编写就熟练了。 -->

  1. <table border="1" cellpadding="0" cellspacing="0">
  2. <caption>商品信息表</caption>
  3. <thead>
  4. <tr>
  5. <th>商品id</th>
  6. <th>商品品名</th>
  7. <th>商品价格</th>
  8. <th>商品数量</th>
  9. <th>商品金额</th>
  10. <th>商品品类</th>
  11. <th>总数</th>
  12. <th>总金额</th>
  13. </tr>
  14. </thead>
  15. <tbody>
  16. <tr>
  17. <td>1</td>
  18. <td>华为手机</td>
  19. <td>1200</td>
  20. <td>5</td>
  21. <td>6000</td>
  22. <td rowspan="2">手机类</td>
  23. <td rowspan="2">11</td>
  24. <td rowspan="2">36000</td>
  25. </tr>
  26. <tr>
  27. <td>2</td>
  28. <td>苹果手机</td>
  29. <td>5000</td>
  30. <td>6</td>
  31. <td>30000</td>
  32. <!-- <td>手机类</td> -->
  33. <!-- <td>&nbsp;&nbsp;</td> -->
  34. <!-- <td>&nbsp;&nbsp;</td> -->
  35. </tr>
  36. <tr>
  37. <td>3</td>
  38. <td>香蕉</td>
  39. <td>30</td>
  40. <td>4</td>
  41. <td>120</td>
  42. <td rowspan="3">水果类</td>
  43. <td rowspan="3">13</td>
  44. <td rowspan="3">260</td>
  45. </tr>
  46. <tr>
  47. <td>4</td>
  48. <td>苹果</td>
  49. <td>20</td>
  50. <td>5</td>
  51. <td>100</td>
  52. <!-- <td>水果类</td> -->
  53. <!-- <td>&nbsp;&nbsp;</td> -->
  54. <!-- <td>&nbsp;&nbsp;</td> -->
  55. </tr>
  56. <tr>
  57. <td>5</td>
  58. <td>桔子</td>
  59. <td>10</td>
  60. <td>4</td>
  61. <td>40</td>
  62. <!-- <td>水果类</td> -->
  63. <!-- <td>&nbsp;&nbsp;</td> -->
  64. <!-- <td>&nbsp;&nbsp;</td> -->
  65. </tr>
  66. </tbody>
  67. </table>

</body>
</html>

更多相关文章

  1. MySQL 什么时候使用INNER JOIN 或 LEFT JOIN
  2. Android购物车的实现(升级版 仿淘宝)
  3. Android之自定义Adapter的ListView
  4. Android(安卓)简单购物车
  5. iOS开发周报:Swift 项目合并 Android(安卓)分支,App Store 开展 “
  6. 【Android(安卓)Studio】Resource Merging资源合并规则
  7. Android多模块构建合并aar解决方案
  8. Android多指触摸
  9. android 之JSON

随机推荐

  1. javascript去掉前后空格
  2. 在java中如何计算从1970年1月1日零时零分
  3. 1563: 高精度加法
  4. 跪求一个java抽奖中奖算法的实现,在线等,急
  5. Cxf 集成spring完整示例
  6. leetcode解题之242# Valid Anagram Java
  7. 自定义视图无法工作,直到我触摸屏幕
  8. RabbitMQ四种Exchange类型之Headers(Java
  9. 将字符串拆分为字符串数组。
  10. Gson将List 反序列化为realmList