html制作table

本日学习内容

讲了vscode常用的一些插件以及html一些常用的标签,其中包括:

  • div
  • table
  • link
  • images
  • a

table部分讲了合并单元格

以下是html代码

  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>Document</title>
  8. <style>
  9. td{
  10. border:solid#000 1px;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <table style="width: 90%;border-collapse:collapse;border:none;" border="0" cellspacing=1>
  16. <caption>报价表</caption>
  17. <thead>
  18. <tr style="background-color: #4caf50;">
  19. <td>id</td>
  20. <td>品名</td>
  21. <td>单价</td>
  22. <td>数量</td>
  23. <td>金额</td>
  24. </tr>
  25. </thead>
  26. <tbody>
  27. <tr>
  28. <td>01</td>
  29. <td rowspan="2">香蕉</td>
  30. <td rowspan="2">7.5</td>
  31. <td>1</td>
  32. <td>7.5</td>
  33. </tr>
  34. <tr>
  35. <td>01</td>
  36. <td>2</td>
  37. <td>15</td>
  38. </tr>
  39. <tr>
  40. <td>02</td>
  41. <td>苹果</td>
  42. <td>8.5</td>
  43. <td>2</td>
  44. <td>17</td>
  45. </tr>
  46. </tbody>
  47. <tfoot style="background-color: #009688;">
  48. <tr>
  49. <td colspan="3" align="center">合计</td>
  50. <td>5</td>
  51. <td>24.5</td>
  52. </tr>
  53. </tfoot>
  54. </table>
  55. </body>
  56. </html>

效果图如下:

代码效果图