常用标签,属性,表格

学习第二天

常用标签

  • 常用:a ,img,style,div,input
  • 列表元素:nav+ul+li
  • 表格元素:table+thead+tr+th/td+tbody+tr+td+tfoot+tr+td
  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. </head>
  9. <body>
  10. <!-- 分析:N行5列 -->
  11. <table border="1" width="80%" cellspacing="0" cellpadding="10">
  12. <!-- 标题 -->
  13. <caption>
  14. <!-- 商品盘点表 -->
  15. <!-- 表头 -->
  16. <tr>
  17. <th colspan="6" bgcolor="yellow">商品盘点表</th>
  18. <!-- <th></th>
  19. <th></th>
  20. <th></th>
  21. <th></th> -->
  22. </tr>
  23. </caption>
  24. <!-- 表体 -->
  25. <tbody bgcolor="red" align="center">
  26. <tr>
  27. <td class="color">id</td>
  28. <td>品名</td>
  29. <td>价格</td>
  30. <td>数量</td>
  31. <td>金额</td>
  32. <td>类别</td>
  33. </tr>
  34. <tr>
  35. <td class="color">1</td>
  36. <td>笔记本</td>
  37. <td>10</td>
  38. <td>10</td>
  39. <td>100</td>
  40. <td rowspan="2">移动电脑</td>
  41. </tr>
  42. <tr>
  43. <td class="color">2</td>
  44. <td>游戏本</td>
  45. <td>20</td>
  46. <td>20</td>
  47. <td>400</td>
  48. <!-- <td></td> -->
  49. </tr>
  50. <tr>
  51. <td class="color">3</td>
  52. <td>平板电脑</td>
  53. <td>30</td>
  54. <td>30</td>
  55. <td>900</td>
  56. <td rowspan="2">固定电脑</td>
  57. </tr>
  58. <tr>
  59. <td class="color">4</td>
  60. <td>台式机</td>
  61. <td>40</td>
  62. <td>40</td>
  63. <td>1600</td>
  64. <!-- <td></td> -->
  65. </tr>
  66. </tbody>
  67. <tbody align="center">
  68. <tr>
  69. <td colspan="6" class="tjbf">统计部分</td>
  70. <!-- <td></td>
  71. <td></td>
  72. <td></td>
  73. <td></td>
  74. <td></td> -->
  75. </tr>
  76. </tbody>
  77. <tbody align="center">
  78. <tr>
  79. <td class="color">总计金额</td>
  80. <td
  81. rowspan="2"
  82. colspan="4"
  83. class="bz"
  84. title="哎呀,帅哥美女,来玩呀,来都来了,说点啥呗,做点啥也行呀"
  85. >
  86. 备注:快把鼠标移过来
  87. </td>
  88. <!-- <td></td>
  89. <td></td>
  90. <td></td>-->
  91. <td class="money">3000</td>
  92. </tr>
  93. <tr>
  94. <td class="color">总计个数</td>
  95. <!-- <td></td>
  96. <td></td>
  97. <td></td>
  98. <td></td> -->
  99. <td class="money">200</td>
  100. </tr>
  101. </tbody>
  102. <style>
  103. .color {
  104. background-color: burlywood;
  105. }
  106. .tjbf {
  107. background-color: chartreuse;
  108. }
  109. .bz {
  110. background-color: darkcyan;
  111. }
  112. .money {
  113. background: lightskyblue;
  114. }
  115. </style>
  116. </table>
  117. </body>
  118. </html>