表格的制作

效果图

代码如下

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport"
  6. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <title>Document</title>
  9. </head>
  10. <body>
  11. <style>
  12. </style>
  13. <table border="1" width="70%" cellpadding="0" cellspacing="0">
  14. <caption>
  15. 课程表
  16. </caption>
  17. <thead>
  18. <tr>
  19. <th>时间</th>
  20. <th colspan="2">8:30 - 12:00</th>
  21. <th colspan="2">13:00 - 17:00</th>
  22. </tr>
  23. </thead>
  24. <tbody>
  25. <tr align="center">
  26. <td rowspan="2" bgcolor="skyblue">上午</td>
  27. <td>HTML</td>
  28. <td>朱老师</td>
  29. <td>PHP</td>
  30. <td>西门老师</td>
  31. </tr>
  32. <tr align="center">
  33. <td>JAVA</td>
  34. <td>小红</td>
  35. <td>JAVASCRIPT</td>
  36. <td>倩倩</td>
  37. </tr>
  38. <tr align="center">
  39. <td colspan="5">午休时间</td>
  40. </tr>
  41. </tbody>
  42. <tfooter>
  43. <tr bgcolor="lightcyan">
  44. <td>请注意:</td>
  45. <td colspan="4" align="center">课后按时完成作业</td>
  46. </tr>
  47. </tfooter>
  48. </table>
  49. </body>
  50. </html>