8_表格标签.html 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <!-- table标签 表格标签 -->
  10. <!-- border属性 表格的边框宽度 cellspacing属性 表格的单元格间距 -->
  11. <table border="1" cellspacing="0">
  12. <!-- thead标签 表格的表头部分 -->
  13. <thead>
  14. <!-- tr标签 表格的行标签 -->
  15. <tr>
  16. <!-- th标签 表格的表头单元格标签 -->
  17. <th>姓名</th>
  18. <th>年龄</th>
  19. <th>性别</th>
  20. </tr>
  21. </thead>
  22. <!-- tbody标签 表格的主体部分 -->
  23. <tbody>
  24. <!-- tr标签 表格的行标签 -->
  25. <tr>
  26. <!-- td标签 表格的单元格标签 -->
  27. <td>张三</td>
  28. <td>18</td>
  29. <td>男</td>
  30. </tr>
  31. <tr>
  32. <td>李四</td>
  33. <td>19</td>
  34. <td>女</td>
  35. </tr>
  36. <tr>
  37. <td>王五</td>
  38. <td>20</td>
  39. <td>男</td>
  40. </tr>
  41. </tbody>
  42. </table>
  43. <!-- 简化版本的表格标签 -->
  44. <table border="1" cellspacing="0">
  45. <tr>
  46. <td>1</td>
  47. <!-- colspan属性 跨列合并 合并多个单元格到一个单元格中 -->
  48. <td colspan="2">23</td>
  49. </tr>
  50. <tr>
  51. <td>4</td>
  52. <td>5</td>
  53. <!-- rowspan属性 跨行合并 合并多个单元格到一个单元格中 -->
  54. <td rowspan="2">69</td>
  55. </tr>
  56. <tr>
  57. <td>7</td>
  58. <td>8</td>
  59. </tr>
  60. </table>
  61. </body>
  62. </html>