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

table和form的使用

程序员文章站 2022-03-13 13:58:10
...
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>table</title>
  6. <style>
  7. .bg_blue {
  8. background: #6495ed;
  9. height: 25px;
  10. }
  11. .center {
  12. text-align: center;
  13. }
  14. div {
  15. margin: 10px 0;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <table border="1" cellspacing="0">
  21. <tr bgcolor="#6495ed">
  22. <td colspan="5">&nbsp;</td>
  23. </tr>
  24. <tr>
  25. <td colspan="5">------- 基本资料 -------</td>
  26. </tr>
  27. <tr>
  28. <td width="100">姓名:</td>
  29. <td width="100">马小姐</td>
  30. <td width="100">性别:</td>
  31. <td width="100"></td>
  32. <td width="100" rowspan="7"></td>
  33. </tr>
  34. <tr>
  35. <td>学历:</td>
  36. <td>中专</td>
  37. <td>身高:</td>
  38. <td align="right">CM</td>
  39. </tr>
  40. <tr>
  41. <td>籍贯:</td>
  42. <td>广东</td>
  43. <td>出生年月:</td>
  44. <td>1991-12-01</td>
  45. </tr>
  46. <tr>
  47. <td>毕业院校:</td>
  48. <td colspan="3">汕头市目欣科技中学</td>
  49. </tr>
  50. <tr>
  51. <td>主修专业:</td>
  52. <td colspan="3">管理学 => 会计学</td>
  53. </tr>
  54. <tr>
  55. <td>工作经验:</td>
  56. <td>未知</td>
  57. <td>目前年薪:</td>
  58. <td>保密/年</td>
  59. </tr>
  60. <tr>
  61. <td>有效证件:</td>
  62. <td>身份证</td>
  63. <td>证件号码:</td>
  64. <td>**************</td>
  65. </tr>
  66. <tr class="bg_blue">
  67. <td colspan="5"></td>
  68. </tr>
  69. <tr>
  70. <td colspan="5">------- 求职意向 -------</td>
  71. </tr>
  72. <tr class="bg_blue">
  73. <td>寻求职位</td>
  74. <td colspan="4">出纳员,会计文员</td>
  75. </tr>
  76. <tr>
  77. <td>求职地区:</td>
  78. <td colspan="2">罗湖区 福田区</td>
  79. <td>工资待遇:</td>
  80. <td colspan="2">面议</td>
  81. </tr>
  82. <tr>
  83. <td>自我评价:</td>
  84. <td colspan="4">
  85. 本人对等待工作认真负责,本人对等待工作认真负责,本人对等待工作认真负责,本人对等待工作认真负责,本人对等待工作认真负责,本人对等待工作认真负责,本人对等待工作认真负责,本人对等待工作认真负责,本人对等待工作认真负责,本人对等待工作认真负责,本人对等待工作认真负责,本人对等待工作认真负责,
  86. </td>
  87. </tr>
  88. <tr class="bg_blue">
  89. <td colspan="5"></td>
  90. </tr>
  91. <tr>
  92. <td colspan="5">------- 教育培训 -------</td>
  93. </tr>
  94. <tr class="center">
  95. <td>起止时间</td>
  96. <td colspan="2">就读院校名称</td>
  97. <td>主修专业</td>
  98. <td>学历</td>
  99. </tr>
  100. <tr class="center">
  101. <td>2009.09~2012.07</td>
  102. <td colspan="2">汕头市目欣科技中学</td>
  103. <td>会计电算化</td>
  104. <td>中专</td>
  105. </tr>
  106. <tr class="bg_blue">
  107. <td colspan="5"></td>
  108. </tr>
  109. <tr>
  110. <td colspan="5">------- 工作经验(1) -------</td>
  111. </tr>
  112. <tr class="center">
  113. <td>就职公司:</td>
  114. <td colspan="2">深圳XXX电器有限公司</td>
  115. <td>公司行业:</td>
  116. <td>其它</td>
  117. </tr>
  118. <tr class="center">
  119. <td>就职时间:</td>
  120. <td colspan="2">2011年12月</td>
  121. <td>就职部门:</td>
  122. <td>财务部</td>
  123. </tr>
  124. <tr class="center">
  125. <td>公司性质:</td>
  126. <td colspan="2">其它</td>
  127. <td>就职职位:</td>
  128. <td>出纳员</td>
  129. </tr>
  130. <tr>
  131. <td>工作描述:</td>
  132. <td colspan="4">
  133. 本人对等待工作认真负责,本人对等待工作认真负责,本人对等待工作认真负责,本人对等待工作认真负责,本人对等待工作认真负责,本人对等待工作认真负责,本人对等待工作认真负责,本人对等待工作认真负责,本人对等待工作认真负责,本人对等待工作认真负责,本人对等待工作认真负责,本人对等待工作认真负责,
  134. </td>
  135. </tr>
  136. <tr class="bg_blue">
  137. <td colspan="5"></td>
  138. </tr>
  139. <tr>
  140. <td colspan="5">------- 联系方式 -------</td>
  141. </tr>
  142. <tr>
  143. <td>联系电话:</td>
  144. <td colspan="4">134********</td>
  145. </tr>
  146. <tr>
  147. <td>联系手机:</td>
  148. <td colspan="4">134********</td>
  149. </tr>
  150. <tr>
  151. <td>电子邮件:</td>
  152. <td colspan="4">134********@163.com</td>
  153. </tr>
  154. </table>
  155. <br/>
  156. <h3>用户注册</h3>
  157. <form action="" method="post">
  158. <div>
  159. 账号: <input type="text" name="user_name" placeholder="不超过八个字符">
  160. </div>
  161. <div>
  162. 密码: <input type="password" name="pwd" placeholder="6-16个字符">
  163. </div>
  164. <div>
  165. 邮箱: <input type="email" name="email" placeholder="example@mail.com">
  166. </div>
  167. <div>
  168. 年龄: <input type="number" name="age" min="1">
  169. </div>
  170. <div>
  171. 生日: <input type="date" name="birthday">
  172. </div>
  173. <div>
  174. 课程:
  175. <select name="kecheng">
  176. <option value="h5" selected>HTML5</option>
  177. <option value="c3">CSS3</option>
  178. <option value="js">javascript</option>
  179. </select>
  180. </div>
  181. <div>
  182. 爱好:
  183. <label>
  184. <input type="checkbox" name="love[]" value="game"> 打游戏
  185. </label>
  186. <label>
  187. <input type="checkbox" name="love[]" value="video"> 看电影
  188. </label>
  189. <label>
  190. <input type="checkbox" name="love[]" value="code"> 撸代码
  191. </label>
  192. </div>
  193. <div>
  194. 性别:
  195. <label>
  196. <input type="radio" name="sex" value="1">
  197. </label>
  198. <label>
  199. <input type="radio" name="sex" value="2">
  200. </label>
  201. <label>
  202. <input type="radio" name="sex" value="0" checked>保密
  203. </label>
  204. </div>
  205. <div>
  206. 简介:
  207. <textarea rows="15" cols="50" name="desc"></textarea>
  208. </div>
  209. <input type="submit" value="提交">
  210. <input type="button" value="Ajax">
  211. </form>
  212. </body>
  213. </html>

效果预览

table和form的使用