Community Learn Tools Library Leisure
search
English
Home > List of blog posts > HTML表格实战：制作商品信息表格
Blogger Information
Blog 5
fans 0
comment 0
visits 6229
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML表格实战：制作商品信息表格
不在线先生
Original
2737 people have browsed it

作业要求：

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

作业代码：

  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>DAY02 | 表格绘制作业 </title>
  8. </head>
  9. <body>
  10.     <H1>1.作业要求:</H1>
  11.     <a>写一个商品信息表，要求有id,品名，价格，数量，金额等字段， 最后要有合计，如总数， 总金额，并且商品按品类进行合并显示，要求用到行与列的合并， 别怕失败，多写几次，就对表格的编写就熟练了。</a>
  12.     <br>
  13.     <br>
  14.     <img src="https://haofanghui.oss-cn-shenzhen.aliyuncs.com/img/20210630133906.png" style="width: 30%;" alt="">
  15.     <br>
  16.     <br>
  17.     <br>
  18.     <h1>2.作业内容:</h1>
  19. <table border="1" width="30%" cellspacing="0">
  21. <!-- 标题 -->
  22. <caption>
  23.     <h1>商品信息表</h1>
  24.     <a>制表:2021/06/29</a>
  25.     <br>
  26.     <br>
  27. </caption>
  30. <!-- 表头 -->
  31. <tr align="center" bgcolor="#92cddb">
  32.     <td>ID</td>
  33.     <td>品类</td>
  34.     <td>品名</td>
  35.     <td>数量</td>
  36.     <td>单价</td>
  37.     <td>金额</td>
  38. </tr>
  40. <!-- 表体 -->
  41. <tr align="center">
  42.     <td>1</td>
  43.     <td rowspan="2">衣服</td>
  44.     <td>冬装</td>
  45.     <td>1</td>
  46.     <td>100</td>
  47.     <td>100</td>
  48. </tr>
  50. <tr align="center">
  51.     <td>2</td>
  52.     <td>夏装</td>
  53.     <td>1</td>
  54.     <td>100</td>
  55.     <td>100</td>
  56. </tr>
  58. <tr align="center">
  59.     <td>3</td>
  60.     <td rowspan="2">饮料</td>
  61.     <td>可口可乐</td>
  62.     <td>1</td>
  63.     <td>100</td>
  64.     <td>100</td>
  65. </tr>
  67. <tr align="center">
  68.     <td>4</td>
  69.     <td>百事可乐</td>
  70.     <td>1</td>
  71.     <td>100</td>
  72.     <td>100</td>
  73. </tr>
  75. <tr>
  76.     <td colspan="6" bgcolor="#fce9da" align="center">以下为备用物品</td>
  77. </tr>
  79. <tr align="center">
  80.     <td>5</td>
  81.     <td rowspan="2">数码</td>
  82.     <td>相机</td>
  83.     <td>1</td>
  84.     <td>100</td>
  85.     <td>100</td>
  86. </tr>
  88. <tr align="center">
  89.     <td>6</td>
  90.     <td>镜头</td>
  91.     <td>1</td>
  92.     <td>100</td>
  93.     <td>100</td>
  94. </tr>
  97. <!-- 表尾 -->
  98. <tr>
  99.     <td colspan="4" rowspan="2" align="center">合计</td>
  100.     <td align="center" bgcolor="#90cbdb">平均单价</td>
  101.     <td align="center" bgcolor="#f7be89">金额合计</td>
  102. </tr>
  104. <tr>
  106.     <td align="center" >100</td>
  107.     <td align="center" >600</td>
  108. </tr>
  110. </table>
  112. </body>
  113. </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