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

表格和表单制作

程序员文章站 2022-03-03 23:28:37
...
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>表格表单制作</title>
  5. <style>
  6. #div1{
  7. width: 900px;
  8. height: 900px;
  9. margin: 0 auto;
  10. }
  11. #div2{
  12. width: 400px;
  13. height: 600px;
  14. background-color: #ccc;
  15. margin: 0 auto;
  16. padding: 20px 30px 20px 150px;
  17. }
  18. #div2_1>input,label,textarea,select{
  19. margin: 10px 0px;
  20. }
  21. table{
  22. border-collapse: collapse;
  23. }
  24. tr,td,th{
  25. border: 1px black solid;
  26. width: 120px;
  27. text-align: center;
  28. }
  29. </style>
  30. </head>
  31. <body>
  32. <div id="div1">
  33. <table>
  34. <tr>
  35. <td colspan="5" style=" background-color: skyblue;height: 25px;"></td>
  36. </tr>
  37. <tr>
  38. <td colspan="5" style="text-align: left"><b>&nbsp;&nbsp;&nbsp;----基本资料----</b></td>
  39. </tr>
  40. <tr>
  41. <td>姓名:</td>
  42. <td>马小姐</td>
  43. <td>性别:</td>
  44. <td></td>
  45. <td rowspan="7"></td>
  46. </tr>
  47. <tr>
  48. <td>学历:</td>
  49. <td>中专</td>
  50. <td>身高</td>
  51. <td>CM</td>
  52. </tr>
  53. <tr>
  54. <td>籍贯:</td>
  55. <td>广东</td>
  56. <td>出生年月</td>
  57. <td>1991-12-01</td>
  58. </tr>
  59. <tr>
  60. <td>毕业院校:</td>
  61. <td colspan="3">汕头市科技中学</td>
  62. </tr>
  63. <tr>
  64. <td>主修专业:</td>
  65. <td colspan="3">会计学</td>
  66. </tr>
  67. <tr>
  68. <td>工作经验;</td>
  69. <td>未知</td>
  70. <td>目前年薪:</td>
  71. <td>保密/年</td>
  72. </tr>
  73. <tr>
  74. <td colspan="5" style=" background-color: skyblue;height: 25px;"></td>
  75. </tr>
  76. <tr>
  77. <td colspan="5" style="text-align: left"><b>&nbsp;&nbsp;&nbsp;----求职意向----</b></td>
  78. </tr>
  79. <tr>
  80. <td>寻求职位</td>
  81. <td colspan="4">出纳,会计文员</td>
  82. </tr>
  83. <tr>
  84. <td>求职地区:</td>
  85. <td style="width: 240px;">罗湖区 福田区</td>
  86. <td>工资待遇:</td>
  87. <td colspan="2">面议</td>
  88. </tr>
  89. <tr>
  90. <td>自我评价:</td>
  91. <td colspan="4">我对待工作认真负责,善于沟通、协调有较强的组织本事与团队精神;活泼开朗、乐观上进、有爱心并善于施教并行;上进心强、勤于学习能不断提高自身的本事与综合素质。
  92. 在未来的工作中,我将以充沛的精力,刻苦钻研的精神来努力工作,稳定地提高自我的工作本事,与公司同步发展。
  93. 进取主动、独立性强、具有高度的职责感和敬业精神,待人真诚、诚实守信、团结协作意识强,能够吃苦耐劳,勇于挑战新事物,具有必须的开拓创新本事,“踏实做事,诚实做人”是我为人处世的原则。</td>
  94. </tr>
  95. <tr>
  96. <td colspan="5" style=" background-color: skyblue;height: 25px;"></td>
  97. </tr>
  98. <tr>
  99. <td colspan="5" style="text-align: left"><b>&nbsp;&nbsp;&nbsp;----教育培训----</b></td>
  100. </tr>
  101. <tr>
  102. <td>起止时间</td>
  103. <td style="width: 240px;">就读学校</td>
  104. <td>主修专业</td>
  105. <td colspan="2">学历</td>
  106. </tr>
  107. <tr>
  108. <td>2009.09~2012.07</td>
  109. <td style="width: 240px;">汕头市科技中学</td>
  110. <td>会计电算化</td>
  111. <td colspan="2">中专</td>
  112. </tr>
  113. <tr>
  114. <td colspan="5" style=" background-color: skyblue;height: 25px;"></td>
  115. </tr>
  116. <tr>
  117. <td colspan="5" style="text-align: left"><b>&nbsp;&nbsp;&nbsp;----工作经验----</b></td>
  118. </tr>
  119. <tr>
  120. <td>就职公司</td>
  121. <td style="width: 240px;">深圳是电器科技有限公司</td>
  122. <td>公司行业</td>
  123. <td colspan="2">其他</td>
  124. </tr>
  125. <tr>
  126. <td>就职时间:</td>
  127. <td style="width: 240px;">2011年12月至今</td>
  128. <td>就职部门:</td>
  129. <td colspan="2">财务部</td>
  130. </tr>
  131. <tr>
  132. <td>公司性质:</td>
  133. <td style="width: 240px;">其他</td>
  134. <td>就职职位:</td>
  135. <td colspan="2">出纳员</td>
  136. </tr>
  137. <tr>
  138. <td>工作描述:</td>
  139. <td colspan="4">我对待工作认真负责,善于沟通、协调有较强的组织本事与团队精神;活泼开朗、乐观上进、有爱心并善于施教并行;上进心强、勤于学习能不断提高自身的本事与综合素质。
  140. 在未来的工作中,我将以充沛的精力,刻苦钻研的精神来努力工作,稳定地提高自我的工作本事,与公司同步发展。
  141. 进取主动、独立性强、具有高度的职责感和敬业精神,待人真诚、诚实守信、团结协作意识强,能够吃苦耐劳,勇于挑战新事物,具有必须的开拓创新本事,“踏实做事,诚实做人”是我为人处世的原则。</td>
  142. </tr>
  143. <tr>
  144. <td colspan="5" style=" background-color: skyblue;height: 25px;"></td>
  145. </tr>
  146. <tr>
  147. <td colspan="5" style="text-align: left"><b>&nbsp;&nbsp;&nbsp;----联系方式----</b></td>
  148. </tr>
  149. <tr>
  150. <td>联系电话:</td>
  151. <td colspan="4">12345678910</td>
  152. </tr>
  153. <tr>
  154. <td>联系手机:</td>
  155. <td colspan="4">45678912300</td>
  156. </tr>
  157. <tr>
  158. <td>电子邮件:</td>
  159. <td colspan="4">**********@163.com</td>
  160. </tr>
  161. </table>
  162. </div>
  163. <hr/>
  164. <div id="div2">
  165. <h3>用户注册</h3>
  166. <form>
  167. <div id="div2_1">
  168. 账号:<input type="text" name="user" placeholder="请输入账号" value=""><br>
  169. 密码:<input type="password" name="user" placeholder="请输入密码" value=""><br>
  170. 邮箱:<input type="email" name="user" placeholder="example@mail.com" value=""><br>
  171. 年龄:<input type="number " name="user" value=""><br>
  172. 生日:<input type="date" name="user" value=""><br>
  173. 课程:<select>
  174. <option>HTML5</option>
  175. <option>CSS3</option>
  176. <option>JS</option>
  177. </select><br>
  178. 爱好:<label>
  179. <input type="checkbox" name="user" value="">打游戏
  180. </label>
  181. <label>
  182. <input type="checkbox" name="user" value="">打篮球
  183. </label>
  184. <label>
  185. <input type="checkbox" name="user" value="">敲代码
  186. </label>
  187. <br>
  188. 性别:<label>
  189. <input type="radio" name="user" value="">
  190. </label>
  191. <label>
  192. <input type="radio" name="user" value="">
  193. </label>
  194. <label>
  195. <input type="radio" name="user" value="">保密
  196. </label>
  197. <br>
  198. 简介:<textarea cols="30" rows="10"></textarea><br>
  199. <input type="submit"name="user" value="提交">
  200. <input type="button" value="Ajax">
  201. </div>
  202. </form>
  203. </div>
  204. </body>
  205. </html>