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

Table及Form表单

程序员文章站 2022-05-16 21:27:04
...

课程表

效果图

Table及Form表单

源代码

  1. <table border="1" align="center">
  2. <caption style="font-size: 24px; line-height: 50px; font-weight: 500">
  3. 合肥市南门小学六年级课程表
  4. </caption>
  5. <thead>
  6. <th width="100" height="40">时间</th>
  7. <th width="100" height="40">周一</th>
  8. <th width="100" height="40">周二</th>
  9. <th width="100" height="40">周三</th>
  10. <th width="100" height="40">周四</th>
  11. <th width="100" height="40">周五</th>
  12. </thead>
  13. <tbody align="center">
  14. <tr height="30">
  15. <td rowspan="4" bgcolor="lightgreen">上午</td>
  16. <td>数学1</td>
  17. <td>数学2</td>
  18. <td>数学3</td>
  19. <td>数学</td>
  20. <td>数学</td>
  21. </tr>
  22. <tr height="30">
  23. <!-- <td>数学</td> -->
  24. <td>数学</td>
  25. <td>数学</td>
  26. <td>数学</td>
  27. <td>数学</td>
  28. <td>数学</td>
  29. </tr>
  30. <tr height="30">
  31. <!-- <td>数学</td> -->
  32. <td>数学</td>
  33. <td>数学</td>
  34. <td>数学</td>
  35. <td>数学</td>
  36. <td>数学</td>
  37. </tr>
  38. <tr height="30">
  39. <!-- <td>数学</td> -->
  40. <td>数学</td>
  41. <td>数学</td>
  42. <td>数学</td>
  43. <td>数学</td>
  44. <td>数学</td>
  45. </tr>
  46. <tr height="30">
  47. <td colspan="6">中午休息</td>
  48. <!-- <td>数学</td>
  49. <td>数学</td>
  50. <td>数学</td>
  51. <td>数学</td>
  52. <td>数学</td> -->
  53. </tr>
  54. <tr height="30">
  55. <td rowspan="3" bgcolor="lightgreen">数学</td>
  56. <td>数学</td>
  57. <td>数学</td>
  58. <td>数学</td>
  59. <td>数学</td>
  60. <td>数学</td>
  61. </tr>
  62. <tr height="30">
  63. <!-- <td>数学</td> -->
  64. <td>数学</td>
  65. <td>数学</td>
  66. <td>数学</td>
  67. <td>数学</td>
  68. <td>数学</td>
  69. </tr>
  70. <tr height="30">
  71. <!-- <td>数学</td> -->
  72. <td>数学</td>
  73. <td>数学</td>
  74. <td>数学</td>
  75. <td>数学</td>
  76. <td>数学</td>
  77. </tr>
  78. <tr height="30">
  79. <td>备注</td>
  80. <td colspan="5">每天下午15:30-17:30在学校完成作业才可以回家</td>
  81. <!-- <td>数学</td>
  82. <td>数学</td>
  83. <td>数学</td>
  84. <td>数学</td> -->
  85. </tr>
  86. </tbody>
  87. </table>

FORM表单

效果图

Table及Form表单

源代码

  1. <h1>FORM表单-用户注册</h1>
  2. <form action="doForm.php" method="post">
  3. <div>
  4. <label for="name">账号:</label>
  5. <input
  6. type="text"
  7. name="username"
  8. id="name"
  9. placeholder="输入您的账号"
  10. />
  11. </div>
  12. <div>
  13. <label for="psw">密码:</label>
  14. <input
  15. type="password"
  16. name="psw"
  17. id="psw"
  18. placeholder="数字+英文+符号,至少8位"
  19. />
  20. </div>
  21. <div>
  22. <label for="email">邮箱:</label>
  23. <input
  24. type="email"
  25. name="email"
  26. id="email"
  27. placeholder="请输入您的邮箱"
  28. />
  29. </div>
  30. <div>
  31. <label for="secret">性别:</label>
  32. <input type="radio" name="gender" value="male" id="male" /><label
  33. for="male"
  34. ></label
  35. >
  36. <input type="radio" name="gender" value="female" id="female" /><label
  37. for="female"
  38. ></label
  39. >
  40. <input
  41. type="radio"
  42. name="gender"
  43. value="secret"
  44. id="secret"
  45. checked
  46. /><label for="secret">保密</label>
  47. </div>
  48. <div>
  49. <label>国家:</label>
  50. <select name="country">
  51. <option value="">--请选择国家--</option>
  52. <option value="ch">中国</option>
  53. <option value="us">美国</option>
  54. <option value="uk">英国</option>
  55. </select>
  56. </div>
  57. <div>
  58. <label>爱好:</label>
  59. <input
  60. type="checkbox"
  61. name="hobby[]"
  62. value="swimming"
  63. id="swimming"
  64. /><label for="swimming">游泳</label>
  65. <input
  66. type="checkbox"
  67. name="hobby[]"
  68. value="swimming"
  69. id="basketball"
  70. /><label for="basketball">篮球</label>
  71. <input
  72. type="checkbox"
  73. name="hobby[]"
  74. value="swimming"
  75. id="football"
  76. /><label for="football">足球</label>
  77. </div>
  78. <button>提交</button>
  79. </form>