0629作业

使用html写一个商品信息表，要求有id，品名，价格，数量，金额等字段， 最后要有合计，如总数，总金额，并且商品按品类进行合并显示，要求用到行与列的合并

html 运行结果

html浏览器运行结果

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 border="1" width="80%" cellspacing="0" cellpadding="5">
  11.         <!-- 标题 -->
  12.         <caption><strong>商品信息表</strong></caption>
  14.         <!-- 表头 -->
  15.         <thead >
  16.             <tr bgcolor="lightblue">
  17.                 <th>id</th>
  18.                 <th>品名</th>
  19.                 <th>商品名称</th>
  20.                 <th>单价</th>
  21.                 <th>数量</th>
  22.                 <th>金额</th>
  23.             </tr>
  24.         </thead>        
  25.         <!-- 表体 -->    
  26.         <tbody>
  27.             <tr>
  28.                 <td>1</td>
  29.                 <td rowspan="3" >电子产品</td>
  30.                 <td>Lenovo Thinkpad T14笔记本</td>
  31.                 <td>6000</td>
  32.                 <td>20</td>
  33.                 <td>120000</td>
  34.             <tr>
  35.                 <td>2</td>
  36.                 <!-- <td>电子产品</td> -->
  37.                 <td>小米10S手机</td>
  38.                 <td>2000</td>
  39.                 <td>20</td>
  40.                 <td>40000</td>
  41.             </tr>
  42.             <tr>
  43.                 <td>3</td>
  44.                 <!-- <td>电子产品</td> -->
  45.                 <td>小米无线蓝牙耳机</td>
  46.                 <td>300</td>
  47.                 <td>10</td>
  48.                 <td>3000</td>
  49.             </tr>
  50.             <tr>
  51.                 <td>4</td>
  52.                 <td rowspan="2">家电</td>
  53.                 <td>格兰仕微波炉</td>
  54.                 <td>500</td>
  55.                 <td>10</td>
  56.                 <td>5000</td>
  57.             </tr>
  58.             <tr>
  59.                 <td>5</td>
  60.                 <!-- <td>家电</td> -->
  61.                 <td>美的电饭煲</td>
  62.                 <td>500</td>
  63.                 <td>10</td>
  64.                 <td>5000</td>
  65.             </tr>
  66.         </tbody>
  67.         <!-- 表尾 -->
  68.         <tfoot>
  69.             <tr bgcolor="lightblue">
  70.                 <td colspan="4" align="center">合计</td>
  71.                 <td>70</td>
  72.                 <td>173000</td>
  73.             </tr>
  74.         </tfoot> 
  75.     </table>
  76. </body>
  77. </html>

更多相关文章

  1. HTML表格案例《商品信息表》
  2. 图书商品信息表
  3. 商品信息表
  4. 学习第二天0629
  5. html 背景图片全局填充
  6. PHP:【ThinkPHP】=>下载、安装、运行Thinkphp6 /安装view /写增
  7. “这段代码，我在本地运行没问题啊？”
  8. .NET IDE Rider公布2020.2路线图
  9. K8S CronJob简单入门，和手动重复操作Say Goodbye！

随机推荐

  1. 编译Android内核
  2. android与unity交互
  3. android,ios app icon 应用图标大小/尺寸
  4. 【Android】android:windowSoftInputMode
  5. android 动态壁纸 3 解决 动态壁纸列表界
  6. android 布局特殊的属性介绍
  7. Android中shape属性详解：（设置圆角、设置渐
  8. 使用Bottom Navigation Activity实现Andr
  9. AndroidMenifest.xml中android:sharedUse
  10. Android属性动画源代码解析（超详细）