HTML表格标签及合并行列使用

HTML的表格结构

  1. 标题:caption
  2. 表头:thead
  3. 表格主体:tbody
  4. 表格页脚:tfoot

常用属性

html中的属性的的结构是名值对结构,值一般放在双引号和单引号中。

  • border=”1” :当以表格外边框
  • cellspacing:定义表格之间的间距
  • cellpanding:定义表格内容,内边距
  • rowspan:跨行合并
  • colspan:跨列合并

表格行列合并

  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. </head>
  9. <body>
  10. <table border="1" cellpandding cellspacing="0">
  11. <caption>手机产品管理</caption>
  12. <thead>
  13. <tr>
  14. <th>id</th>
  15. <th>产品名称</th>
  16. <th>产品数量</th>
  17. <th>产品售价</th>
  18. <th>产品类别</th>
  19. </tr>
  20. </thead>
  21. <tbody>
  22. <tr>
  23. <td>0001</td>
  24. <td>RedMi K40</td>
  25. <td>20</td>
  26. <td>2400</td>
  27. <td rowspan="4">手机</td>
  28. </tr>
  29. <tr>
  30. <td>0002</td>
  31. <td>RedMi K40游戏增强版</td>
  32. <td>30</td>
  33. <td>2200</td>
  34. </tr>
  35. <tr>
  36. <td>0003</td>
  37. <td>Mi 10</td>
  38. <td>30</td>
  39. <td>3200</td>
  40. </tr>
  41. <tr>
  42. <td>0004</td>
  43. <td>Mi 11</td>
  44. <td>30</td>
  45. <td>4100</td>
  46. </tr>
  47. </tbody>
  48. <tfoot>
  49. <tr style="background-color: aqua;">
  50. <td>合计</td>
  51. <td colspan="2" align="center">总价:5000000</td>
  52. <td colspan="2" align="center">总数:500</td>
  53. </tr>
  54. </tfoot>
  55. </table>
  56. </body>
  57. </html>

浏览器运行结果