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

Html 表格和表单练习

程序员文章站 2022-03-13 12:34:23
...

Html 表格和表单练习

1. 表格

- 复习表格标签结构

标签 说明
<table></table> 表格
<caption></caption> 表格标题
<thead></thead> 表头
<tbody></tbody> 表格主体
<tfoot></tfoot> 表格尾部，一般用来注示说明
<tr></tr> 行
<th></th> 列，用于表头内
<td></td> 列，用于表格主体内
rowspan=数字 合并列属性，要删除多余的 td
colspan=数字 合并行属性，要删除多余的 td

- 练习

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    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.     <table
    11. 

  11.       border="1"
    12. 

  12.       width="500"
    13. 

  13.       cellspacing="0"
    14. 

  14.       cellpadding="5"
    15. 

  15.       align="center"
    16. 

  16.     >
    17. 

  17.       <caption>
    18. 

  18.         <h2>小学课程表</h2>
    19. 

  19.       </caption>
    20. 

  20.       <thead>
    21. 

  21.         <tr>
    22. 

  22.           <th>时间</th>
    23. 

  23.           <th>星期一</th>
    24. 

  24.           <th>星期二</th>
    25. 

  25.           <th>星期三</th>
    26. 

  26.           <th>星期四</th>
    27. 

  27.           <th>星期五</th>
    28. 

  28.         </tr>
    29. 

  29.       </thead>
    30. 

  30.       <tbody align="center">
    31. 

  31.         <tr>
    32. 

  32.           <td rowspan="4">上午</td>
    33. 

  33.           <td>语文</td>
    34. 

  34.           <td>语文</td>
    35. 

  35.           <td>语文</td>
    36. 

  36.           <td>语文</td>
    37. 

  37.           <td>语文</td>
    38. 

  38.         </tr>
    39. 

  39.         <tr>
    40. 

  40.           <td>语文</td>
    41. 

  41.           <td>语文</td>
    42. 

  42.           <td>语文</td>
    43. 

  43.           <td>语文</td>
    44. 

  44.           <td>语文</td>
    45. 

  45.         </tr>
    46. 

  46.         <tr>
    47. 

  47.           <td>语文</td>
    48. 

  48.           <td>语文</td>
    49. 

  49.           <td>语文</td>
    50. 

  50.           <td>语文</td>
    51. 

  51.           <td>语文</td>
    52. 

  52.         </tr>
    53. 

  53.         <tr>
    54. 

  54.           <td>语文</td>
    55. 

  55.           <td>语文</td>
    56. 

  56.           <td>语文</td>
    57. 

  57.           <td>语文</td>
    58. 

  58.           <td>语文</td>
    59. 

  59.         </tr>
    60. 

  60.         <tr>
    61. 

  61.           <td colspan="6">休息</td>
    62. 

  62.         </tr>
    63. 

  63.         <tr>
    64. 

  64.           <td rowspan="3">下午</td>
    65. 

  65.           <td>语文</td>
    66. 

  66.           <td>语文</td>
    67. 

  67.           <td>语文</td>
    68. 

  68.           <td>语文</td>
    69. 

  69.           <td>语文</td>
    70. 

  70.         </tr>
    71. 

  71.         <tr>
    72. 

  72.           <td>语文</td>
    73. 

  73.           <td>语文</td>
    74. 

  74.           <td>语文</td>
    75. 

  75.           <td>语文</td>
    76. 

  76.           <td>语文</td>
    77. 

  77.         </tr>
    78. 

  78.         <tr>
    79. 

  79.           <td>语文</td>
    80. 

  80.           <td>语文</td>
    81. 

  81.           <td>语文</td>
    82. 

  82.           <td>语文</td>
    83. 

  83.           <td>语文</td>
    84. 

  84.         </tr>
    85. 

  85.       </tbody>
    86. 

  86.       <tfoot align="center">
    87. 

  87.         <tr>
    88. 

  88.           <td>备注</td>
    89. 

  89.           <td colspan="5">每天下午课后辅导到18:00。</td>
    90. 

  90.         </tr>
    91. 

  91.       </tfoot>
    92. 

  92.     </table>
    93. 

  93.   </body>
    94. 

  94. </html>
    95.

运行效果
Html 表格和表单练习

2. 表单

- 复习表单常用标签

标签说明 语法
文本标签 <label for=""></label>
文本框 <input type="text" name="" id="" />
按钮 <input type="button" value="按钮" />
密码框 <input type="password" name="" id="" />
日期框 <input type="date" name="" id="" />
单选按钮 <input type="radio" name="" id="" />
多选按钮 <input type="checkbox" name="" id="">

- 练习

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    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.     <form>
    11. 

  11.       <h3>注册表单</h3>
    12. 

  12.       <br />
    13. 

  13.       <label for="call">外号：</label>
    14. 

  14.       <input type="text" name="call" id="call" /><br />
    15. 

  15.       <label>性别：</label>
    16. 

  16.       <label for="man">男</label>
    17. 

  17.       <input type="radio" name="sex" id="man" />
    18. 

  18.       <label for="women">女</label>
    19. 

  19.       <input type="radio" name="sex" id="women" /><br />
    20. 

  20.       <label for="bsd">生日：</label>
    21. 

  21.       <input type="date" name="bsd" id="bsd" /><br />
    22. 

  22.       <label for="like">爱好：</label>
    23. 

  23.       <label for="football">足球</label>
    24. 

  24.       <input type="checkbox" name="football" id="football" />
    25. 

  25.       <label for="baskeball">篮球</label>
    26. 

  26.       <input type="checkbox" name="baskeball" id="baskeball" />
    27. 

  27.       <label for="fish">钓鱼</label>
    28. 

  28.       <input type="checkbox" name="fish" id="fish" />
    29. 

  29.       <label for="run">跑步</label>
    30. 

  30.       <input type="checkbox" name="run" id="run" /><br />
    31. 

  31.       <label for="password">登录密码：</label>
    32. 

  32.       <input type="password" name="password" id="password" /><br />
    33. 

  33.       <input type="button" value="提交" />
    34. 

  34.     </form>
    35. 

  35.   </body>
    36. 

  36. </html>
    37.

运行效果（没做样式）
Html 表格和表单练习

上一篇： vuejs是什么样的框架

下一篇： 在php视图文件中使用element ui

推荐阅读