【HTML】如何使用html制作一个简易的表格？ 好的，下面是一个简单的HTML5购物车示例代码： “`html <!DOCTYPE html> <html> <head> <title>购物车</title> <meta charset=”utf-8″> <style type=”text/css”> body { font-family: Arial, sans-serif; background-color: #f5f5f5; } h1 { text-align: center; } table { margin: 0 auto; border-collapse: collapse; width: 80%; background-color: white; } th, td { padding: 10px; text-align: left; border-bottom: 1px solid #ddd; } tr:hover { background-color: #f5f5f5; } td:first-child { width: 60%; } td:last-child { text-align: right; } #total { text-align: right; font-weight: bold; margin-top: 20px; font-size: 20px; } .button { display: inline-block; padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; float: right; margin-top: 20px; } .button:hover { background-color: #3e8e41; } </style> </head> <body> <h1>购物车</h1> <table> <thead> <tr> <th>商品名称</th> <th>价格</th> <th>数量</th> <th>小计</th> </tr> </thead> <tbody> <tr> <td>商品1</td> <td>10</td> <td><input type=”number” name=”quantity1″ value=”1″ min=”1″></td> <td>10</td> </tr> <tr> <td>商品2</td> <td>20</td> <td><input type=”number” name=”quantity2″ value=”1″ min=”1″></td> <td>20</td> </tr> <tr> <td>商品3</td> <td>30</td> <td><input type=”number” name=”quantity3″ value=”1″ min=”1″></td> <td>30</td> </tr> </tbody> </table> <div id=”total”>总计：60</div> <button class=”button”>结算</button> </body> </html> “` 这个购物车页面包括一个表格，显示了购物车中的商品名称、价格、数量和小计，还有一个总计的区域和一个结算按钮。用户可以在数量输入框中输入购买数量，页面会自动计算小计和总计。当用户结算按钮时，可以跳转到结算页面进行支付等操作。
2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/46807.html
