search

博客列表 >0629商品信息表

0629商品信息表

Giesen?
Giesen?原创
2021年07月14日 23:05:56448浏览
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <style>
  13.         td {
  14.             text-align: center;
  15.         }
  16.     </style>
  17.     <!-- 表格td文本居中 -->
  18.     <!-- 表头 -->
  19.     <table border="1" width="80%" cellspacing="0" cellpadding="3">
  20.         <!-- cellspacing表格横线内宽度  表格空白的行高 border 表格横线外宽度-->
  21.         <!-- 标题 -->
  22.         <caption>商品信息表</caption>
  23.         <thead bgcolor="yellow">
  24.             <tr>
  25.                 <th>购买人</th>
  26.                 <th>品名</th>
  27.                 <th>单价</th>
  28.                 <th>数量</th>
  29.                 <th>金额</th>
  30.             </tr>
  31.         </thead>
  32.         <!-- 表体 -->
  33.         <tbody>
  34.             <tr>
  35.                 <td rowspan="2" bgcolor="lightblue">张三</td>
  36.                 <td>苹果手机6s</td>
  37.                 <td>5000</td>
  38.                 <td>1</td>
  39.                 <td>5000</td>
  40.             </tr>
  42.             <!-- 列的合并需要两行都在同一个tbody中才可以生效 -->
  43.             <tr>
  44.                 <!-- <td>1</td> -->
  45.                 <td>苹果手机6</td>
  46.                 <td>5000</td>
  47.                 <td>1</td>
  48.                 <td>5000</td>
  49.             </tr>
  50.         </tbody>
  51.         <tbody>
  52.             <tr>
  53.                 <td bgcolor="lightblue">李四</td>
  54.                 <td>蓝牙耳机</td>
  55.                 <td>1300</td>
  56.                 <td>2</td>
  57.                 <td>2600</td>
  58.             </tr>
  59.         </tbody>
  61.         <tbody>
  62.             <tr>
  63.                 <td bgcolor="lightblue">老吴</td>
  64.                 <td>充电线</td>
  65.                 <td>20</td>
  66.                 <td>5</td>
  67.                 <td>100</td>
  68.             </tr>
  70.             <!-- 表尾 -->
  71.         <tfoot>
  72.             <tr>
  73.                 <td colspan="4" bgcolor="red">总金额</td>
  74.                 <td>7700</td>
  75.             </tr>
  77.         </tfoot>
  80.     </table>
  82. </body>
  84. </html>
上一条：Ajax请求实例,与懒加载技术下一条：0629作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多