整合table,caption,thead,tbody,tfoot,tr,th,td标签制作一个表格

实例

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>商品列表详情</title><style>#goodstable,tr,th,td{text-align:center;width:1000px;border:1pxsolidhotpink;}#foot{line-height:40px;background-color:lightgrey;}#title{font-weight:bolder;}#head{background-color:lightgrey;}.list{background-color:lightskyblue;}</style></head><body><divid="goods"><tablecellspacing="0"><captionid="title">商品列表详情</caption><theadid="head"><tr><th>id</th><th>商品名称</th><th>商品分类</th><th>商品价格</th><th>商品库存</th><th>商品总价值</th></tr></thead><tbodyclass="list"><tr><td>1</td><td>苹果</td><tdrowspan="3">水果</td><td>10元/个</td><td>10个</td><td>100元</td></tr><tr><td>2</td><td>香蕉</td><td>20元/个</td><td>20个</td><td>400元</td></tr><tr><td>3</td><td>梨</td><td>30元/个</td><td>30个</td><td>900元</td></tr></tbody><tbodyclass="list"><tr><td>4</td><td>啤酒</td><tdrowspan="3">酒水</td><td>5元/瓶</td><td>10瓶</td><td>50元</td></tr><tr><td>5</td><td>红酒</td><td>1元/瓶</td><td>20瓶</td><td>20元</td></tr><tr><td>6</td><td>天之蓝</td><td>0.5元/瓶</td><td>30瓶</td><td>15元</td></tr></tbody><tfootid="foot"><tr><tdcolspan="4">总计</td><td>120(个/瓶)</td><td>1785元</td></tr></tfoot></table></div></body></html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

1629969121.jpg

更多相关文章

  1. 实例演绎pdo在用户登录环节是怎么防sql注入及实战预处理与会话跟
  2. 文件上传的实例
  3. 通过链式调用,将一个类委托给另一个类实现数据库的查询操作
  4. 一个前端后端的综合实例
  5. 数据库连接及事件委托
  6. 关于PHP递归函数以及处理多维数组和目录文件实例
  7. PHP获取两个时间之间的所有日期
  8. 补:0811作业 类与对象
  9. 作业内容:oop基础:请举例实例演绎以下难点 1. 类(对象抽象化的结

随机推荐

  1. 轻量级的 Android 应用开发集成环境 - An
  2. Android开发文档
  3. 关于Linearlayout中控件设置为其底部的问
  4. android的ORMLite的sqlite自定义框架
  5. Android各版本及API对应关系,持续更新!
  6. IIS7上设置MIME让其支持android和Iphone
  7. 去除安卓checkbox按下时的阴影效果
  8. Android ORM系列之ActiveAndroid
  9. java.lang.IllegalStateException: You n
  10. android开发01 --开发工具