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

task1表格

程序员文章站 2022-03-16 09:00:37
...

task1表格

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>12月22日作业 task1表格</title>
  8. </head>
  9. <body>
  10. <table class="" border="1" width="500">
  11. <caption>表格标题是caption </caption>
  12. <thead>
  13. <tr>
  14. <th>表头</th>
  15. <th>文件</th>
  16. <th></th>
  17. <th>thead</th>
  18. </tr>
  19. </thead>
  20. <tbody>
  21. <tr>
  22. <td>我是</td>
  23. <td>第一行</td>
  24. <td></td>
  25. <td>内容</td>
  26. </tr>
  27. <tr>
  28. <td class=hbl rowspan="3" >如果合并列用
  29. <p>rowspan="列数"</p></td>
  30. <td>PHP</td>
  31. <td>中文网</td>
  32. <td>I LOVE YOU</td>
  33. </tr>
  34. <tr>
  35. <td>我的</td>
  36. <td>学号</td>
  37. <td>296113</td>
  38. <!-- <td>您好</td> -->
  39. </tr>
  40. <tr>
  41. <td>这是</td>
  42. <td>我的</td>
  43. <td>表格作业</td>
  44. <!-- <td>您好</td> -->
  45. </tr>
  46. <tr>
  47. <td class=hbh colspan="4">合并行用colspan="行数"
  48. <p>并注释后面行数</p>
  49. </td>
  50. <!-- <td>我</td>
  51. <td>是超出的部分被</td>
  52. <td>注释</td> -->
  53. </tr>
  54. </tbody>
  55. <tfoot border="1" class="tfoot">
  56. <tr>
  57. <td colspan="4" >表格的底部是
  58. <p>用tfoot标签</p>
  59. </td>
  60. <!-- <td></td>
  61. <td></td>
  62. <td></td> -->
  63. </tr>
  64. </tfoot>
  65. </table>
  66. <style>
  67. table {
  68. width: 900px;
  69. text-align: center;
  70. background-color: cadetblue;
  71. }
  72. .hbl{
  73. background-color: aqua;
  74. }
  75. .hbh{
  76. background-color: azure;
  77. }
  78. </style>
  79. </body>
  80. </html>