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>

更多相关文章

  1. 常用标签，属性，表格
  2. 2021.7.6表格作业，
  3. table表格的运用
  4. html5表格实战（课程表）
  5. 案例表格的应用
  6. 表格的制作
  7. HTML表格标签及合并行列使用
  8. 表格标签使用
  9. HTML表格实战：制作商品信息表格

随机推荐

  1. Android:推荐学习
  2. ch031 Android AsyncTask
  3. ch016 Android 自定义对话框.
  4. Android 垂直的Slidebar 代码
  5. ch028 Android 断点续传
  6. My Android Camera Notes
  7. Android:GridView+AbsoluteLayout作一个
  8. Android 数据库技术
  9. android ImageView scaleType属性
  10. RadioButton修改标志图片