欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

商品信息表(表格的应用)

程序员文章站 2022-06-05 17:43:32
...

商品信息表(表格的应用)

关键点:

  • colspan 列合并

  • rowspan 行合并

案例代码:

  1. <table border="1" width="80%" cellspacing="0" cellpadding="5">
  2. <caption>
  3. 商品信息表
  4. </caption>
  5. <thead>
  6. <tr>
  7. <th>id</th>
  8. <th>品类</th>
  9. <th>品名</th>
  10. <th>数量</th>
  11. <th>价格</th>
  12. <th>金额</th>
  13. </tr>
  14. </thead>
  15. <tbody align="center">
  16. <tr>
  17. <td>1</td>
  18. <td rowspan="3">珠宝</td>
  19. <td>翡翠</td>
  20. <td>1</td>
  21. <td>20000</td>
  22. <td>20000</td>
  23. </tr>
  24. <tr>
  25. <td>2</td>
  26. <td>玛瑙</td>
  27. <td>2</td>
  28. <td>3000</td>
  29. <td>6000</td>
  30. </tr>
  31. <tr>
  32. <td>3</td>
  33. <td>琥珀</td>
  34. <td>10</td>
  35. <td>500</td>
  36. <td>50000</td>
  37. </tr>
  38. <tr>
  39. <td>4</td>
  40. <td>手串</td>
  41. <td>檀香</td>
  42. <td>2</td>
  43. <td>200</td>
  44. <td>400</td>
  45. </tr>
  46. </tbody>
  47. <tfoot align="center">
  48. <tr>
  49. <td colspan="2"><strong>合计</strong></td>
  50. <td><strong>总数</strong></td>
  51. <td>15</td>
  52. <td><strong>总金额</strong></td>
  53. <td>76400</td>
  54. </tr>
  55. </tfoot>
  56. </table>

效果图

商品信息表(表格的应用)