制作一张订单表格

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
html程序实现
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>表格</title>
  8.     <style>
  9.       table {
  10.         border: 1px solid blue;
  11.       }
  12.       td {
  13.         border: 1px solid blue;
  14.         text-align: center;
  15.       }
  16.       th {
  17.         border: 1px solid yellow;
  18.         text-align: center;
  19.       }
  20.       .order.cap {
  21.         color: red;
  22.         font-size: larger;
  23.         font-weight: bold;
  24.         background-color: lightblue;
  25.       }
  26.       .order.head {
  27.         background-color: yellowgreen;
  28.       }
  29.       .total {
  30.         background-color: aquamarine;
  31.       }
  32.     </style>
  33.   </head>
  34.   <body>
  35.     <table>
  36.       <caption class="order cap">
  37.         2023.3.12 订单
  38.       </caption>
  39.       <thead class="order head">
  40.         <th>ID</th>
  41.         <th>PO</th>
  42.         <th>ITEM</th>
  43.         <th>DESCRIPTION</th>
  44.         <th>QTY</th>
  45.         <th>PRICE</th>
  46.         <th>TOTAL PRICE</th>
  47.       </thead>
  48.       <tbody>
  49.         <tr>
  50.           <td>1</td>
  51.           <td rowspan="2">PO#001</td>
  52.           <td>PN001</td>
  53.           <td>apple</td>
  54.           <td>10</td>
  55.           <td>1</td>
  56.           <td>10</td>
  57.         </tr>
  58.         <tr>
  59.           <td>2</td>
  60.           <td>PN002</td>
  61.           <td>banana</td>
  62.           <td>100</td>
  63.           <td>1</td>
  64.           <td>100</td>
  65.         </tr>
  66.         <tr>
  67.           <td colspan="4" class="total">Total:</td>
  68.           <td class="total">110</td>
  69.           <td></td>
  70.           <td colspan="2" class="total">110</td>
  71.         </tr>
  72.         <tr>
  73.           <td>3</td>
  74.           <td rowspan="2">PO#002</td>
  75.           <td>PN003</td>
  76.           <td>TV SET</td>
  77.           <td>2</td>
  78.           <td>1000</td>
  79.           <td>2000</td>
  80.         </tr>
  81.         <tr>
  82.           <td>4</td
  83.           <td>PN004</td>a
  84.           <td>Frige</td>
  85.           <td>5</td>
  86.           <td>2000</td>
  87.           <td>10000</td>
  88.         </tr>
  89.         <tr>
  90.           <td colspan="4" class="total">Total:</td>
  91.           <td class="total">7</td>
  92.           <td></td>
  93.           <td colspan="2" class="total">12000</td>
  94.         </tr>
  95.       </tbody>
  96.     </table>
  97.   </body>
  98. </html>
效果图

订单效果图

注意点
  • 自定义class style的实现最前面要添加’.’
  • style 里定义border需要设置类型，譬如’solid’，才可以显现出来
  • td 的border和table 的border 是两个部分，在style里需要分别设置:border: 1px solid blue; ，在table标签里只需要设置宽度就可以:border="1"
【本文转自：韩国服务器 https://www.68idc.cn 复制请保留原URL】
更多阅读