博客列表 >图书商品信息表

图书商品信息表

橙絮圆
橙絮圆原创
2021年06月30日 14:16:16788浏览

图书商品信息表


要求:

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

  • 实例效果图
    实例效果图

  • 表格html代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>图书商品信息表</title>
  8. </head>
  9. <body>
  10. <table
  11. border="1"
  12. width="90%"
  13. cellspacing="0"
  14. cellpadding="5"
  15. align="center"
  16. >
  17. <caption>
  18. <h3>图书商品信息表</h3>
  19. </caption>
  20. <thead bgcolor="lightcyan">
  21. <tr>
  22. <th>ID</th>
  23. <th>品类</th>
  24. <th>品名</th>
  25. <th>价格(单价)</th>
  26. <th>数量</th>
  27. <th>金额(小计)</th>
  28. </tr>
  29. </thead>
  30. <tbody align="center" bgcolor="lightgreen">
  31. <tr>
  32. <td>1001</td>
  33. <td rowspan="3">教科书</td>
  34. <td>科学技术</td>
  35. <td>10.00元</td>
  36. <td>2</td>
  37. <td>20.00元</td>
  38. </tr>
  39. <tr>
  40. <td>1002</td>
  41. <!-- <td>教科书</td> -->
  42. <td>儿童早教</td>
  43. <td>15.00元</td>
  44. <td>3</td>
  45. <td>45.00元</td>
  46. </tr>
  47. <tr>
  48. <td>1003</td>
  49. <!-- <td>教科书</td> -->
  50. <td>php编程</td>
  51. <td>25.00元</td>
  52. <td>1</td>
  53. <td>25.00元</td>
  54. </tr>
  55. </tbody>
  56. <tbody align="center" bgcolor="lightpink">
  57. <tr>
  58. <td>1004</td>
  59. <td rowspan="2">工具书</td>
  60. <td>中华字典</td>
  61. <td>30.00元</td>
  62. <td>3</td>
  63. <td>90.00元</td>
  64. </tr>
  65. <tr>
  66. <td>1005</td>
  67. <!-- <td>教科书</td> -->
  68. <td>英语字典</td>
  69. <td>14.00元</td>
  70. <td>2</td>
  71. <td>28.00元</td>
  72. </tr>
  73. </tbody>
  74. <tfoot align="center" bgcolor="lightblue">
  75. <tr>
  76. <td colspan="6">合计:208.00元</td>
  77. <!-- <td></td>
  78. <td></td>
  79. <td></td>
  80. <td></td> -->
  81. </tr>
  82. </tfoot>
  83. </table>
  84. </body>
  85. </html>
上一条:PHP算法下一条:css语法介绍
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议