html元素table练习

先上效果图
果香园6月水果采购记录表 效果图

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>果香园6月水果采购记录表</title>
  8.     <style>
  9.       table {
  10.         text-align: center;
  11.       }
  12.       td,
  13.       th {
  14.         padding: 3px 10px 3px 10px;
  15.       }
  16.       th {
  17.         background-color: #ebebeb;
  18.       }
  19.       caption {
  20.         margin-bottom: 20px;
  21.         font-size: 22px;
  22.         font-weight: 700;
  23.       }
  24.     </style>
  25.   </head>
  26.   <body>
  27.     <br />
  28.     <br />
  29.     <br />
  30.     <br />
  31.     <table border="1" cellspacing="0" align="center">
  32.       <caption>
  33.         果香园6月水果采购记录表
  34.       </caption>
  35.       <thead>
  36.         <tr>
  37.           <th>序号</th>
  38.           <th>采购编号</th>
  39.           <th>名称</th>
  40.           <th>单价（元）</th>
  41.           <th>单位</th>
  42.           <th>数量</th>
  43.           <th>日期</th>
  44.           <th>金额</th>
  45.           <th>采购员</th>
  46.         </tr>
  47.       </thead>
  48.       <tbody>
  49.         <tr>
  50.           <td>1</td>
  51.           <td>20210601001</td>
  52.           <td rowspan="2">早酥梨</td>
  53.           <td>45</td>
  54.           <td>箱</td>
  55.           <td>2</td>
  56.           <td>20210601</td>
  57.           <td>90</td>
  58.           <td>刘叶</td>
  59.         </tr>
  60.         <tr>
  61.           <td>2</td>
  62.           <td>20210601002</td>
  63.           <td>45</td>
  64.           <td>箱</td>
  65.           <td>2</td>
  66.           <td>20210615</td>
  67.           <td>90</td>
  68.           <td>刘叶</td>
  69.         </tr>
  70.         <tr>
  71.           <td>3</td>
  72.           <td>20210601001</td>
  73.           <td rowspan="2">油桃</td>
  74.           <td>37</td>
  75.           <td>箱</td>
  76.           <td>2</td>
  77.           <td>20210601</td>
  78.           <td>74</td>
  79.           <td>刘叶</td>
  80.         </tr>
  81.         <tr>
  82.           <td>4</td>
  83.           <td>20210601002</td>
  84.           <td>37</td>
  85.           <td>箱</td>
  86.           <td>2</td>
  87.           <td>20210615</td>
  88.           <td>74</td>
  89.           <td>刘叶</td>
  90.         </tr>
  91.       </tbody>
  92.       <tfoot>
  93.         <td>合计</td>
  94.         <td colspan="8">采购费：328元</td>
  95.       </tfoot>
  96.     </table>
  97.   </body>
  98. </html>

更多相关文章

  1. 企业采购正版软件时选择单机版还是浮动版？有哪些优缺点？
  2. 创建采购申请(BAPI_REQUISITION_CREATE / BAPI_PR_CREATE)
  3. （BADI）Copy PR header text to PO header when ME21N
  4. SE75 采购申请创建抬头文本
  5. C虾仔笔记 - CheckBox多选按钮
  6. iPhone和Android的开放问题
  7. Android(安卓)Studio用法之ListView(图文并茂的listview界面)
  8. Android(安卓)Studio 之 对话框开发(Dialog) ---- 两种方式来实
  9. [掌上智能] 为什么Android即使硬件高一档也没iPhone那么流畅？

随机推荐

  1. SQL注入另类技巧
  2. 世界国家 的数据库sql
  3. mysql下载+安装+启动过程及问题解决
  4. Recordset记录集对象的属性
  5. SQL - 仅选择distinct一列
  6. Excel 复制Sql查询结果错位
  7. 新手求助一条sql语句~~帮忙看看
  8. SQL 日志太大,脚本清除
  9. 使用python抓取csdn博客访问量并保存在sq
  10. 编译安装mysql-server5.6.32手记