学习第二天

常用标签

  • 常用: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>

更多相关文章

  1. 为何电脑磁盘有的文件突然都看不见了,却还占用着空间
  2. “苹果,请送Linus Torvalds一台ARM电脑”
  3. 学习Python用什么电脑好?配置要求高吗?
  4. Google为Android平板电脑提供了新的媒体娱乐空间
  5. 工业平板电脑在医院自助设备中的广泛应用
  6. 提供坚固耐用的笔记本电脑的合作技术
  7. 给你一个理由学习Linux,树莓派4免费送
  8. 仿京东商城页面
  9. 手机电脑文件自动同步

随机推荐

  1. 5 枚 Android 风格的 Chrome 主题
  2. 实现了在android实现左右滑动切换界面的
  3. Android(安卓)v4包下的PagerTitleStrip,Vi
  4. android横竖屏 用法总结
  5. 使用ProgressBar实现进度条
  6. Android 通过python实现自动化构建打包上
  7. 设置环境变量ANDROID_SDK_HOME有什么用?
  8. 使用android上传文件
  9. PreferenceActivity的使用 android
  10. 获取Android的Java源代码并在Eclipse中关