Blogger Information
Blog 8
fans 0
comment 0
visits 5538
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html基础:制作简单的表格与表单
WSC
Original
1037 people have browsed it

课程表

html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>表格</title>
  6. </head>
  7. <body>
  8. <table border="1" cellpadding="5" cellspacing="0" width="60%" align="center">
  9. <!--标题-->
  10. <caption>
  11. <h2>xx中学七年级课程表</h2>
  12. </caption>
  13. <!--表头-->
  14. <thead>
  15. <tr bgcolor="skyblue">
  16. <th>时间</th>
  17. <th>周一</th>
  18. <th>周二</th>
  19. <th>周三</th>
  20. <th>周四</th>
  21. <th>周五</th>
  22. </tr>
  23. </thead>
  24. <!--表体-->
  25. <tbody align="center">
  26. <tr>
  27. <th rowspan="4">上午</th>
  28. <td>语文</td>
  29. <td>数学</td>
  30. <td>英语</td>
  31. <td>物理</td>
  32. <td>化学</td>
  33. </tr>
  34. <tr>
  35. <td>语文</td>
  36. <td>数学</td>
  37. <td>英语</td>
  38. <td>物理</td>
  39. <td>化学</td>
  40. </tr>
  41. <tr>
  42. <td>语文</td>
  43. <td>数学</td>
  44. <td>英语</td>
  45. <td>物理</td>
  46. <td>化学</td>
  47. </tr>
  48. <tr>
  49. <td>语文</td>
  50. <td>数学</td>
  51. <td>英语</td>
  52. <td>物理</td>
  53. <td>化学</td>
  54. </tr>
  55. </tbody>
  56. <tbody>
  57. <tr>
  58. <th colspan="6" bgcolor="#dedede">中午</th>
  59. </tr>
  60. </tbody>
  61. <tbody align="center">
  62. <tr>
  63. <th rowspan="3">下午</th>
  64. <td>语文</td>
  65. <td>数学</td>
  66. <td>英语</td>
  67. <td>物理</td>
  68. <td>化学</td>
  69. </tr>
  70. <tr>
  71. <td>语文</td>
  72. <td>数学</td>
  73. <td>英语</td>
  74. <td>物理</td>
  75. <td>化学</td>
  76. </tr>
  77. <tr>
  78. <td>语文</td>
  79. <td>数学</td>
  80. <td>英语</td>
  81. <td>物理</td>
  82. <td>化学</td>
  83. </tr>
  84. </tbody>
  85. <!--表尾-->
  86. <tfoot>
  87. <tr>
  88. <td align="center">备注</td>
  89. <td colspan="5">没有晚自习</td>
  90. </tr>
  91. </tfoot>
  92. </table>
  93. </body>
  94. </html>

效果如下

注册表单

html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>表单</title>
  6. </head>
  7. <body>
  8. <form action="" method="POST">
  9. <table>
  10. <tr>
  11. <!-- 文本输入框 -->
  12. <td><label for="username">用户名:</label></td>
  13. <td><input type="text" name="username" id="username" autofocus required placeholder="请输入账号"></td>
  14. </tr>
  15. <tr>
  16. <td><label for="password">密码:</label></td>
  17. <td><input type="password" name="password" id="password" required placeholder="请输入密码"></td>
  18. </tr>
  19. <tr>
  20. <td><label for="email">邮箱:</label></td>
  21. <td><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
  22. </tr>
  23. <tr>
  24. <!-- 单选按钮 -->
  25. <td><label for="secret">性别:</label></td>
  26. <td>
  27. <input type="radio" name="gender" value="male" id="male"><label for="male"></label>
  28. <input type="radio" name="gender" value="female" id="female"><label for="female"></label>
  29. <input type="radio" name="gender" value="secret" id="secret" checked><label for="secret">未知</label>
  30. </td>
  31. </tr>
  32. <tr>
  33. <!-- 复选框 -->
  34. <td><label>兴趣:</label></td>
  35. <td>
  36. <input type="checkbox" name="hobby[]" id="basketball"><label for="basketball">篮球</label>
  37. <input type="checkbox" name="hobby[]" id=""><label for="football">足球</label>
  38. <input type="checkbox" name="hobby[]" id="game"><label for="game">游戏</label>
  39. <input type="checkbox" name="hobby[]" id="swin"><label for="swin">游泳</label>
  40. </td>
  41. </tr>
  42. <tr>
  43. <!-- 下拉列表 -->
  44. <td><label for="">等级:</label></td>
  45. <td>
  46. <select name="level" id="">
  47. <option value="1">黄金</option>
  48. <option value="2">白银</option>
  49. <option value="3">青铜</option>
  50. <option value="4">黑铁</option>
  51. </select>
  52. </td>
  53. </tr>
  54. <tr>
  55. <!-- datalist -->
  56. <!-- 相当于输入框+下拉列表 -->
  57. <!-- input + select -->
  58. <td><label for="">关键字:</label></td>
  59. <td>
  60. <input type="search" name="search" list="my-key">
  61. <datalist id="my-key">
  62. <option value="html"></option>
  63. <option value="css"></option>
  64. <option value="javacript"></option>
  65. </datalist>
  66. </td>
  67. </tr>
  68. </table>
  69. <button type="submit">提交</button>
  70. </form>
  71. </body>
  72. </html>

效果如下

Correcting teacher:天蓬老师天蓬老师

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post