简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >html表格插入图片及选择器添加样式控制表格

html表格插入图片及选择器添加样式控制表格

菜鸟的博客
菜鸟的博客原创
2021年06月30日 12:26:401144浏览
  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>表格作业</title>
  8.         <style type="text/css">
  10.         .td{
  11.             width: 200px; height: 100px;
  12.             text-align: center;
  13.         }
  14.         .tb{
  15.             height: 50px;
  16.             text-align: center;  
  17.         }
  18.         #biaotouhg{
  19.             background-color: black;
  20.             color: white;
  21.             height: 50px;
  22.         }
  23.         .hanggao{
  24.             height: 50px;background-color: wheat;
  25.             text-align: center;
  26.         }
  27.         #biaojiao{
  28.             height: 50px;background-color: rgb(80, 189, 171);
  29.             text-align: center;
  30.         }
  31.         </style>
  32. </head>
  33. <body>
  34.         <div>
  35.             <table border="1px" width="90%" cellspacing="0">
  36.                 <thead>
  37.                     <caption>明星信息表</caption>
  39.                 </thead>
  40.                 <tbody>
  41.                     <tr>
  42.                         <th>明星编号</th>
  43.                         <th>照片</th>
  44.                         <th>身高/cm
  45.                         <th>年龄</th>
  46.                         <th>体重/kg</th>
  47.                    </tr>
  48.                    <tr>
  49.                        <td class="td">1</td>
  50.                        <td class="td">
  51.                            <img src="https://img2.baidu.com/it/u=3155979620,9621612&fm=26&fmt=auto&gp=0.jpg" alt="1" width="200px;" height="200px";>
  52.                        </td>
  54.                        <td class="td">176</td>
  55.                        <td class="td">21</td>
  56.                        <td class="td">56</td>
  57.                     </tr>
  58.                     <tr>
  59.                      <td class="td">2</td>
  60.                      <td class="td">
  61.                          <img src="https://img0.baidu.com/it/u=1264142311,1055973284&fm=15&fmt=auto&gp=0.jpg" alt="1" width="200px;" height="200px";>
  62.                      </td>
  64.                      <td class="td">186</td>
  65.                      <td class="td"> 22</td>
  66.                      <td class="td"> 55</td>
  67.                     </tr>
  68.                     <tr>
  69.                         <td class="td">3</td>
  70.                         <td class="td">
  71.                             <img src="https://img0.baidu.com/it/u=347274092,3568760326&fm=26&fmt=auto&gp=0.jpg" alt="1" width="200" height="200";>
  72.                         </td>
  73.                         <td class="td">156</td>
  74.                         <td class="td"> 36</td>
  75.                         <td class="td">57</td>
  76.                     </tr>
  77.                     <tr>
  78.                         <td class="td">4</td>
  79.                         <td class="td">
  80.                             <img src="https://img2.baidu.com/it/u=3754010978,3319772041&fm=15&fmt=auto&gp=0.jpg" alt="1" width="200" height="200";>
  81.                         </td>
  82.                         <td class="td">176</td>
  83.                         <td class="td">35</td>
  84.                         <td class="td"> 35</td>
  85.                     </tr>
  86.                     </tbody>
  87.                 </table>   
  88.                 <table border="1px" width="90%" cellspacing="0">
  89.                     <caption>订货记录表</caption>
  90.                     <thead>
  91.                         <tr id="biaotouhg">
  92.                             <th>容量</th>
  93.                             <th>单价/元</th>
  94.                             <th>每板数量</th>
  95.                             <th>订货板数/板</th>
  96.                             <th>& =应订货数量/套</th>
  97.                             <th>每套重量/克</th>
  98.                             <th>总重量/克</th>
  99.                             <th>型号总价</th>
  100.                         </tr>
  101.                     </thead>
  102.                     <tbody >
  104.                         <tr class="hanggao">
  105.                             <td>滴管瓶10ml</td>
  106.                             <td>0.48</td>
  107.                             <td>192</td>
  108.                             <td>1</td>  
  109.                             <td>192</td>
  110.                             <td>29</td>
  111.                             <td>5568</td>
  112.                             <td>92.16</td>
  113.                         </tr>
  114.                         <tr class="hanggao">
  115.                             <td>滴管瓶15ml</td>
  116.                             <td>0.49</td>
  117.                             <td>156</td>
  118.                             <td>1</td>
  119.                             <td>156</td>
  120.                             <td>33.5</td>
  121.                             <td>5226</td>
  122.                             <td>76.44</td>
  123.                         </tr>
  124.                         <tr class="hanggao">
  125.                             <td>喷雾瓶15ml</td>
  126.                             <td>0.49</td>
  127.                             <td>156</td>
  128.                             <td>1</td>
  129.                             <td>156</td>
  130.                             <td>33.5</td>
  131.                             <td>5226</td>
  132.                             <td>76.44</td>
  133.                         </tr>
  135.                     </tbody>
  136.                     <tfoot> 
  137.                         <tr id="biaojiao">
  138.                             <td>2021年6月30日</td>
  139.                             <td colspan="2">备注</td>
  140.                             <td colspan="4">选择容量自动算-重量/价格——【当日结账】</td>>
  141.                             <td>245.06</td>
  144.                         </tr>
  147.                     </tfoot>
  148.                 </table> 
  149.     </body>
  150.     </html>
上一条：html 表格的使用下一条：开发工具使用，浅谈HTTP协议
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多