search

博客列表 >商品信息表

商品信息表

麦兜的故事
麦兜的故事原创
2021年07月01日 13:46:20815浏览

商品信息表

代码效果预览图

代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style type="text/css">
  8.     table{
  9.         border: 1px solid #ccc;
  10.         border-collapse: collapse;
  11.         text-align: center;
  12.     }
  14.     td{
  15.         width: 100px;
  16.         height: 50px;
  17.         border: 1px solid #ccc;
  18.     }
  21.     </style>
  22. </head>
  23. <body>
  25.     <table>
  26.         <!-- 表头 -->
  27.         <thead >
  28.             <tr style="color: #ff6700;background-color: #f3f3f3;">
  29.                 <td>ID</td>
  30.                 <td>分类</td>
  31.                 <td>商品分类</td>
  32.                 <td>价格</td>
  33.                 <td>数量</td>
  34.                 <td>金额</td>
  35.             </tr>
  36.         </thead>
  38.         <!-- 表体 -->
  39.         <tbody>
  40.             <tr>
  41.                 <td>1</td>
  42.                 <td rowspan="3">水果</td>
  43.                 <td>葡萄</td>
  44.                 <td>10元/斤</td>
  45.                 <td>12</td>
  46.                 <td>120元</td>
  47.             </tr>
  48.             <tr>
  49.                 <td>2</td>
  50.                 <!-- <td>水果</td> -->
  51.                 <td>西瓜</td>
  52.                 <td>5元/斤</td>
  53.                 <td>5</td>
  54.                 <td>25元</td>
  55.             </tr>
  56.             <tr>
  57.                 <td>3</td>
  58.                 <!-- <td>水果</td> -->
  59.                 <td>火龙果</td>
  60.                 <td>8元/斤</td>
  61.                 <td>5</td>
  62.                 <td>40元</td>
  63.             </tr>
  64.             <tr>
  65.                 <td>4</td>
  66.                 <td rowspan="2">蔬菜</td>
  67.                 <td>南瓜</td>
  68.                 <td>5元/斤</td>
  69.                 <td>3</td>
  70.                 <td>15元</td>
  71.             </tr>
  72.             <tr>
  73.                 <td>5</td>
  74.                 <!-- <td>蔬菜</td> -->
  75.                 <td>香菜</td>
  76.                 <td>2元/斤</td>
  77.                 <td>4</td>
  78.                 <td>8元</td>
  79.             </tr>
  80.         </tbody>
  81.         <tfoot>
  82.             <tr>
  83.                 <td colspan="4">总计</td>
  84.                 <!-- <td></td> -->
  85.                 <!-- <td></td> -->
  86.                 <!-- <td></td> -->
  87.                 <td>29</td>
  88.                 <td>208元</td>
  89.             </tr>
  90.         </tfoot>
  92.     </table>
  94. </body>
  95. </html>
上一条：Markdown初次使用经验总结下一条：表单应用以及css样式和选择器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多