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

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

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