博客列表 >使用HTML编写表格和表单

使用HTML编写表格和表单

徐凤年
徐凤年原创
2021年12月24日 02:24:491477浏览

1.html表格代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <table border="1" width="750">
  11. <caption>
  12. <h1>北椋世子徐凤年个人情况说明</h1>
  13. </caption>
  14. <thead>
  15. <th>姓名</th>
  16. <th colspan="2">徐凤年</th>
  17. <th>性别</th>
  18. <th colspan="2"></th>
  19. <th>个人照片</th>
  20. </thead>
  21. <tbody bgcolor="green">
  22. <tr>
  23. <td>武力</td>
  24. <td colspan="2">陆地天人境</td>
  25. <td>身份</td>
  26. <td colspan="2">真武大帝降世临凡</td>
  27. <td rowspan="4"><img src="http://work.0917k.com/xfn.png" alt="" width="150" height="200" /></td>
  28. </tr>
  29. <tr>
  30. <td>前世</td>
  31. <td colspan="5">大秦皇帝、逍遥陆地散人、观音宗澹台平静师傅</td>
  32. </tr>
  33. <tr>
  34. <td>爱妃</td>
  35. <td>姜妮</td>
  36. <td>梦想</td>
  37. <td colspan="3">习武为母亲复仇,守住徐骁的基业</td>
  38. </tr>
  39. <tr>
  40. <td>红颜</td>
  41. <td colspan="5">红薯,裴南苇,南宫仆射,陆丞燕,王初冬等</td>
  42. </tr>
  43. <tr>
  44. <td colspan="8" bgcolor="orange">角色经历</td>
  45. </tr>
  46. <tr>
  47. <td colspan="8" bgcolor="red">
  48. 徐姓,名凤年,字天狼(师傅李义山给取的)。为真武大帝降世临凡,八百年前乃大秦皇帝,皇后为洛阳。人间身份是北凉王世子,以纨绔形象著称于世,实则胸藏沟壑,腹有良谋。
  49. </td>
  50. </tr>
  51. <tr>
  52. <td colspan="8" bgcolor="lightblue">重要江湖对战</td>
  53. </tr>
  54. <tr>
  55. <td colspan="8" bgcolor="lightblue">
  56. 徐凤年(陆地天人境)vs 拓拔菩萨(天人大长生,不亚于王仙芝)
  57. 过程:徐凤年先被北莽天道光柱镇压,被天道光柱中仙人破去仙人体魄。在天道光柱被邓太阿一剑惊走后与拓拔菩萨辗转鏖战。战斗中顺手杀死一截柳李凤首,再被天道光柱所伤。后借徐家积攒多年的气运为己用,几乎杀死拓拔菩萨。
  58. 结果:拓拔菩萨重伤不复境界。
  59. </td>
  60. </tr>
  61. </tbody>
  62. </table>
  63. </body>
  64. </html>

效果图:

2.html表单代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>表单</title>
  8. </head>
  9. <body>
  10. <h3>信息统计表</h3>
  11. <form action="nyl.php" method="post">
  12. <div class="">
  13. <label for="name">姓名:</label>
  14. <input type="text" name="name" id="name" value="admin">
  15. </div>
  16. <div class="">
  17. <label for="name">密码:</label>
  18. <input type="password" name="" id="password">
  19. </div>
  20. <div class="">
  21. <label for="mimi">性别</label>
  22. <input type="radio" name="man" id="man"><label for="man"></label>
  23. <input type="radio" name="man" id="woman"><label for="woman"></label>
  24. <input type="radio" name="man" id="mimi"checked>
  25. <label for="mimi">密保</label>
  26. <div>
  27. <p>爱好:
  28. <input type="checkbox" value="sleep" name="love" />睡觉
  29. <input type="checkbox" value="code" name="love" />敲代码
  30. <input type="checkbox" value="chat" name="love" />聊天
  31. <input type="checkbox" value="game" name="love" />游戏
  32. </p>
  33. <div>
  34. <label for="">住址:</label>
  35. <select name="" id="">
  36. <option value="bj">宝鸡</option>
  37. <option value="sh">上海</option>
  38. <option value="gz">广州</option>
  39. <option value="sz">深圳</option>
  40. </select>
  41. </div>
  42. <button>提交</button>
  43. </form>
  44. </html>

效果图:

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议