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

html中的table标签制作表格

程序员文章站 2022-03-03 22:37:55
...

html中的table标签制作表格

  1. html
  2. <head>
  3. <meta charset="utf-8">
  4. <title>HTML标签作业之table</title>
  5. <style>
  6. .jiben {
  7. height: 40px;
  8. border-color: blanchedalmond;
  9. border-bottom: aqua;
  10. text-align: center;
  11. }
  12. .work{
  13. color: chartreuse;
  14. font-size: 18px;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <table border="4" cellspacing="1" width="600px">
  20. <!-- cellspacing是单元格之间的距离 -->
  21. <tr>
  22. <td align="center" colspan="6" bgcolor="aquamarine">
  23. <a href="" >这里是需要用到表格的背景色</a>
  24. </td>
  25. </tr>
  26. <tr class="jiben">
  27. <td colspan="6"> <font size="25" color="crimson">—My基本资料—</font></td>
  28. </tr>
  29. <tr class="jiben" style="color: brown;">
  30. <td>姓名:</td>
  31. <td>性别:</td>
  32. <td>年龄:</td>
  33. <td>身高:</td>
  34. <td>籍贯:</td>
  35. <td>出生日期:</td>
  36. </tr>
  37. <tr class="jiben">
  38. <td>张三疯</td>
  39. <td>男</td>
  40. <td>99</td>
  41. <td>180CM</td>
  42. <td>中国XXXXX</td>
  43. <td>19XXXX11日</td>
  44. </tr>
  45. <tr>
  46. <td colspan="2" style="color: brown;">毕业院校:</td>
  47. <td colspan="4">中国XXX大学</td>
  48. </tr>
  49. <tr>
  50. <td colspan="2" style="color: brown;">主修专业</td>
  51. <td colspan="4">太极拳</td>
  52. </tr>
  53. <tr>
  54. <td colspan="2" style="color: brown;">工作经验</td>
  55. <td>10年</td>
  56. <td colspan="2" style="color: brown;">期望年薪</td>
  57. <td>100W</td>
  58. </tr>
  59. <tr>
  60. <td colspan="2" style="color: brown;">有效证件</td>
  61. <td>身份证</td>
  62. <td colspan="2" style="color: brown;">证件号码</td>
  63. <td>31010**1234</td>
  64. </tr>
  65. <tr>
  66. <td colspan="6" bgcolor="aquamarine" align="center">
  67. <a href="">这里是需要用到表格的背景色</a>
  68. </td>
  69. </tr>
  70. </table>
  71. <hr/>
  72. <table border="6" cellspacing="0" width="600px">
  73. <tr>
  74. <td align="center" colspan="6" bgcolor="coral">
  75. <a href="" >这里是用另外一个table做的</a>
  76. </td>
  77. </tr>
  78. <tr class="jiben">
  79. <td colspan="4"> <font size="25" color="crimson">—求职意向—</font></td>
  80. </tr>
  81. <tr class="jiben" style="color: brown;">
  82. <td colspan="2" >寻求职位:</td>
  83. <td colspan="2">会打太极拳</td>
  84. </tr>
  85. <tr class="jiben">
  86. <td >上班地点</td>
  87. <td>北京</td>
  88. <td>薪资待遇</td>
  89. <td>年薪制</td>
  90. </tr>
  91. <tr>
  92. <td style="color: brown;">自我评价:</td>
  93. <td colspan="3">我会打太极拳我会打太极拳我会打太极拳
  94. 我会打太极拳我会打太极拳我会打太极拳
  95. </td>
  96. </tr>
  97. <tr>
  98. <td colspan="4" bgcolor="bisque" align="center">
  99. <a href="">这里是需要用到表格的背景色</a>
  100. </td>
  101. </tr>
  102. <tr>
  103. <td>教育经历</td>
  104. </tr>
  105. <tr>
  106. <td>教育时间</td>
  107. <td>就读院校</td>
  108. <td>专业</td>
  109. <td>学历</td>
  110. </tr>
  111. <tr>
  112. <td>19XX年-19XX年</td>
  113. <td>北洋船政</td>
  114. <td>水手</td>
  115. <td>舵手</td>
  116. </tr>
  117. <tr>
  118. <td colspan="4" bgcolor="chartreuse" align="center"><a href="" style="color: cornflowerblue;">这里是工作经历</a></td>
  119. </tr>
  120. <tr class="work">
  121. <td>就职公司</td>
  122. <td>中国邮政</td>
  123. <td>所属行业</td>
  124. <td>快递</td>
  125. </tr>
  126. <tr class="work">
  127. <td>就职时间</td>
  128. <td>2XXX年</td>
  129. <td>就职岗位</td>
  130. <td>司机</td>
  131. </tr>
  132. <tr class="work">
  133. <td>公司性质</td>
  134. <td>物流</td>
  135. <td>就职部门</td>
  136. <td>审核员</td>
  137. </tr>
  138. <tr>
  139. <td>
  140. <strong>工作情况</strong>
  141. <h6>右侧是文本框</h6>
  142. </td>
  143. <td colspan="3">
  144. <textarea rows="10" cols="50">工作期间认真负责,具有团队协作精神,吃苦耐劳,工作期间认真负责,具有团队协作精神,吃苦耐劳,工作期间认真负责,具有团队协作精神,吃苦耐劳,工作期间认真负责,具有团队协作精神,吃苦耐劳,工作期间认真负责,具有团队协作精神,吃苦耐劳,工作期间认真负责,具有团队协作精神,吃苦耐劳,工作期间认真负责,具有团队协作精神,吃苦耐劳,工作期间认真负责,具有团队协作精神,吃苦耐劳,</textarea>
  145. </td>
  146. </tr>
  147. <tr class="work">
  148. <td>联系电话</td>
  149. <td>1895XXXXX555</td>
  150. <td>电子邮箱</td>
  151. <td>12XXX3@qq.com</td>
  152. </tr>
  153. </table>
  154. <hr >
  155. <h4>用户注册或者登录</h4>
  156. <form action="reg" method="post">
  157. <div id=" 1">
  158. 用户名:<input type="text" name="user_name" id="" value="" placeholder="只能使用字母作为用户名" />
  159. </div>
  160. <div id="2">
  161. 密码区:<input type="password" name="pass_wd" id="" value="" placeholder="长度大于8位的数字和字母的组合"/>
  162. </div>
  163. <div id="3">
  164. 邮箱号:<input type="email" name="e_mail" id="" value="@qq.com" />
  165. </div>
  166. <div id="4">
  167. 你多大:<input type="number" name="age" id="" value="" placeholder="必须是大于18岁"/>
  168. </div>
  169. <div id="5">
  170. 过生日:<input type="date" name="shengri" id="" value="" />
  171. </div>
  172. <div id="6">
  173. 喜好:
  174. <input type="checkbox" name="" id="" value=""/><label for="">跑步</label>
  175. <input type="checkbox" name="" id="" value=""/><label for="">游泳</label>
  176. <input type="checkbox" name="" id="" value=""/><label for="">瑜伽</label>
  177. </div>
  178. <div id="7">
  179. 选择课程:
  180. <select name="选择课程:">
  181. <option value="">体育</option>
  182. <option value="">舞蹈</option>
  183. <option value="">美术</option>
  184. </select>
  185. </div>
  186. <div id="8">
  187. 性别:<input type="radio" name="" id="" value="" checked=""/><label for="">男</label>
  188. <input type="radio" name="" id="" value=""/><label for="">女</label>
  189. <input type="radio" name="" id="" value=""/><label for="">保密</label>
  190. </div>
  191. <!-- <input type="submit" value="登录"/> -->
  192. <br>
  193. <button type="button">登录</button>
  194. <input type="submit" value="注册"/>
  195. </form>
  196. </body>