search

博客列表 >表格重点总结

表格重点总结

P粉036614676
P粉036614676原创
2022年10月18日 15:31:43485浏览
  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.     <!-- <link rel="stylesheet" href="E:\PHP Web1\HTML\CH-1\1017\1017\static\css\cart.css"> -->
  8.     <title>表格</title>
  9.     <style>
  10.         table{
  11.             width: 2000px;
  12.             height: 800px;
  13.             border-collapse: collapse;/* 表格间距合并*/
  14.             text-align: center;
  15.         }
  16.         table th,
  17. table td {
  18.   border: thin solid #888;
  19.   padding: 5px;
  20. }
  21. table caption {
  22.   font-size: 1.2em;
  23.   margin-bottom: 0.5em;
  24.   letter-spacing: 0.5em;
  25. }
  26. table thead,
  27. table tfoot tr [colspan] {
  28.   background-color: lightcyan;
  29. }
  31. table + button {
  32.   padding: 5px 20px;
  33.   letter-spacing: 5px;
  34.   margin: 10px 10px 10px 320px;
  35.   background-color: violet;
  36.   border: none;
  37.   cursor: pointer;
  38. }
  39. table + button:hover {
  40.   cursor: pointer;
  41.   background-color: orangered;
  42.   color: #fff;
  43.   transition: 0.5s;
  44. }
  46. .green {
  47.   background-color: lightgreen;
  48. }
  49. .wheat {
  50.   background-color: wheat;
  51. }
  53.     </style>
  54. </head>
  55. <body>
  56.     <table border="1">
  57.         <caption>购物车</caption>
  58.         <thead>
  59.             <tr>
  60.                 <th>分类</th>
  61.                 <th>ID</th>
  62.                 <th>名称</th>
  63.                 <th>单价</th>
  64.                 <th>数量</th>
  65.                 <th>金额</th>
  66.             </tr>
  67.         </thead>
  69.         <tbody>
  70.             <tr>
  71.               <td rowspan="3">数码</td>
  72.               <th>5010</th>
  73.               <td>电脑</td>
  74.               <td>9000</td>
  75.               <td>2</td>
  76.               <td>18000</td>
  77.             </tr>
  78.             <tr>
  79.               <th>5012</th>
  80.               <td>手机</td>
  81.               <td>5000</td>
  82.               <td>4</td>
  83.               <td>20000</td>
  84.             </tr>
  85.             <tr>
  86.               <th>5013</th>
  87.               <td>相机</td>
  88.               <td>15000</td>
  89.               <td>2</td>
  90.               <td>30000</td>
  91.             </tr>
  92.             <tr>
  93.               <td rowspan="2">服装</td>
  94.               <th>3030</th>
  95.               <td>男装</td>
  96.               <td>500</td>
  97.               <td>2</td>
  98.               <td>1000</td>
  99.             </tr>
  100.             <tr>
  101.               <th>3031</th>
  102.               <td>女装</td>
  103.               <td>1000</td>
  104.               <td>5</td>
  105.               <td>5000</td>
  106.             </tr>
  107.           </tbody>
  108.           <tfoot>
  109.             <tr>
  110.               <th colspan="4">总计:</th>
  111.               <th>15</th>
  112.               <th>74000</th>
  113.             </tr>
  114.           </tfoot>
  115.     </table>
  116.     <button>结算</button>
  117. </body>
  118. </html>
上一条：10.18作业，表单的属性及应用下一条：vscode 插件-better comments-代码注释高亮
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多