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

使用HTML编写表格和表单

程序员文章站 2022-05-30 16:17:33
...

1.html表格代码

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>Document</title>
    8. 

  8.   </head>
    9. 

  9.   <body>
    10. 

  10.     <table border="1" width="750">
    11. 

  11.       <caption>
    12. 

  12.         <h1>北椋世子徐凤年个人情况说明</h1>
    13. 

  13.       </caption>
    14. 

  14.       <thead>
    15. 

  15.         <th>姓名</th>
    16. 

  16.         <th colspan="2">徐凤年</th>
    17. 

  17.         <th>性别</th>
    18. 

  18.         <th colspan="2">男</th>
    19. 

  19.         <th>个人照片</th>
    20. 

  20.       </thead>
    21. 

  21.       <tbody bgcolor="green">
    22. 

  22.         <tr>
    23. 

  23.           <td>武力</td>
    24. 

  24.           <td colspan="2">陆地天人境</td>
    25. 

  25.           <td>身份</td>
    26. 

  26.           <td colspan="2">真武大帝降世临凡</td>
    27. 

  27.           <td rowspan="4"><img src="http://work.0917k.com/xfn.png" alt="" width="150" height="200" /></td>
    28. 

  28.         </tr>
    29. 

  29.         <tr>
    30. 

  30.           <td>前世</td>
    31. 

  31.           <td colspan="5">大秦皇帝、逍遥陆地散人、观音宗澹台平静师傅</td>
    32. 

  32.         </tr>
    33. 

  33.         <tr>
    34. 

  34.           <td>爱妃</td>
    35. 

  35.           <td>姜妮</td>
    36. 

  36.           <td>梦想</td>
    37. 

  37.           <td colspan="3">习武为母亲复仇，守住徐骁的基业</td>
    38. 

  38.         </tr>
    39. 

  39.         <tr>
    40. 

  40.           <td>红颜</td>
    41. 

  41.           <td colspan="5">红薯，裴南苇，南宫仆射，陆丞燕，王初冬等</td>
    42. 

  42.         </tr>
    43. 

  43.         <tr>
    44. 

  44.           <td colspan="8" bgcolor="orange">角色经历</td>
    45. 

  45.         </tr>
    46. 

  46.         <tr>
    47. 

  47.           <td colspan="8" bgcolor="red">
    48. 

  48.             徐姓，名凤年，字天狼（师傅李义山给取的）。为真武大帝降世临凡，八百年前乃大秦皇帝，皇后为洛阳。人间身份是北凉王世子，以纨绔形象著称于世，实则胸藏沟壑，腹有良谋。
    49. 

  49.           </td>
    50. 

  50.         </tr>
    51. 

  51.         <tr>
    52. 

  52.           <td colspan="8" bgcolor="lightblue">重要江湖对战</td>
    53. 

  53.         </tr>
    54. 

  54.         <tr>
    55. 

  55.           <td colspan="8" bgcolor="lightblue">
    56. 

  56.             徐凤年（陆地天人境）vs 拓拔菩萨（天人大长生，不亚于王仙芝）
    57. 

  57.             过程：徐凤年先被北莽天道光柱镇压，被天道光柱中仙人破去仙人体魄。在天道光柱被邓太阿一剑惊走后与拓拔菩萨辗转鏖战。战斗中顺手杀死一截柳李凤首，再被天道光柱所伤。后借徐家积攒多年的气运为己用，几乎杀死拓拔菩萨。
    58. 

  58.             结果：拓拔菩萨重伤不复境界。
    59. 

  59.           </td>
    60. 

  60.         </tr>
    61. 

  61.       </tbody>
    62. 

  62.     </table>
    63. 

  63.   </body>
    64. 

  64. </html>
    65.

效果图：

使用HTML编写表格和表单

2.html表单代码

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>表单</title>
    8. 

  8.   </head>
    9. 

  9.   <body>
    10. 

  10.       <h3>信息统计表</h3>
    11. 

  11.   <form action="nyl.php" method="post">
    12. 

  12.   <div class="">
    13. 

  13. <label for="name">姓名:</label>
    14. 

  14.     <input type="text" name="name" id="name" value="admin">
    15. 

  15.   </div>  
    16. 

  16.   <div class="">
    17. 

  17.     <label for="name">密码:</label>
    18. 

  18.     <input type="password" name="" id="password">
    19. 

  19.   </div>
    20. 

  20. <div class="">
    21. 

  21.   <label for="mimi">性别</label>
    22. 

  22.   <input type="radio" name="man" id="man"><label for="man">男</label>
    23. 

  23.   <input type="radio" name="man" id="woman"><label for="woman">女</label>
    24. 

  24.   <input type="radio" name="man" id="mimi"checked> 
    25. 

  25.   <label for="mimi">密保</label>
    26. 

  26. <div>
    27. 

  27.   <p>爱好:
    28. 

  28.   <input type="checkbox" value="sleep" name="love" />睡觉
    29. 

  29.   <input type="checkbox" value="code" name="love" />敲代码
    30. 

  30.   <input type="checkbox" value="chat" name="love" />聊天
    31. 

  31.   <input type="checkbox" value="game" name="love" />游戏
    32. 

  32.   </p>
    33. 

  33.   <div>
    34. 

  34.   <label for="">住址:</label>
    35. 

  35.   <select name="" id="">
    36. 

  36.     <option value="bj">宝鸡</option>
    37. 

  37.     <option value="sh">上海</option>
    38. 

  38.     <option value="gz">广州</option>
    39. 

  39.     <option value="sz">深圳</option>
    40. 

  40.   </select>
    41. 

    42. 

  42.   </div>
    43. 

    44. 

  44.  <button>提交</button>
    45. 

  45. </form>
    46. 

  46. </html>
    47.

效果图：

使用HTML编写表格和表单

上一篇： Mozilla推出TowTruck，可嵌入任意网页的实时协作工具

下一篇： Oracle 11g收缩表空间报错 ORA-03297: file contains used data beyondr

推荐阅读