Blogger Information
Blog 43
fans 0
comment 0
visits 30467
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
图书商品信息表
橙絮圆
Original
793 people have browsed it

图书商品信息表


要求:

  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>
Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post