html内table表格的与form表单基础写法!

table表格的与form表单基础写法

table表格写法:

  • 显示样式

    ```html
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    1. tr {
    2. text-align: center;
    3. }

    </style>
    </head>
    <body>

    <!--表格代码部分-->

    <table border="1" width="80%" cellspacing="0" cellpadding="5" align="center">

    <!--设置标题字体粗体:font-weight: bolder;,设置字体大小:font-size: 1.2em;(1.2倍),字体底部间距:margin-bottom: 10px(10像素)-->

    <caption style="font-weight: bolder;font-size: 1.2em;margin-bottom: 10px">实验中学·每周上课时间表</caption>

    <tbody>

    <tr bgcolor="#FBF2EF">
    <th>时间</th>
    <th>星期一</th>
    <th>星期二</th>
    <th>星期三</th>
    <th>星期四</th>
    <th>星期五</th>
    </tr>

    <tr>
    <td rowspan="3" bgcolor="#58ACFA">上午</td>
    <td>语文</td>
    <td>数学</td>
    <td>音乐</td>
    <td>体育</td>
    <td>历史</td>
    </tr>

    <tr>
    <td>语文</td>
    <td>数学</td>
    <td>音乐</td>
    <td>体育</td>
    <td>历史</td>
    </tr>

    <tr>
    <td>语文</td>
    <td>数学</td>
    <td>音乐</td>
    <td>体育</td>
    <td>历史</td>
    </tr>

  1. <tr>
  2. <td colspan="6" bgcolor="#FBEFF2">午间休息</td>
  3. </tr>
  4. <tr>
  5. <td rowspan="2" bgcolor="#58ACFA">下午</td>
  6. <td>语文</td>
  7. <td>数学</td>
  8. <td>音乐</td>
  9. <td>体育</td>
  10. <td>历史</td>
  11. </tr>
  12. <tr>
  13. <td>语文</td>
  14. <td>数学</td>
  15. <td>音乐</td>
  16. <td>体育</td>
  17. <td>历史</td>
  18. </tr>
  19. <tr>
  20. <td bgcolor="#F5DA81">备注</td>
  21. <td colspan="5" bgcolor="#F5DA81">每天下午16:00 - 17:00,写完作业再回家</td>
  22. </tr>
  23. </tbody>
  24. <tfoot>
  25. <tr>
  26. <td colspan="6">表格页脚元素</td>
  27. </tr>
  28. </tfoot>

</table>
<!--表格代码部分 end-->
</body>
</html>

  1. ## form表单:
  2. - 显示样式
  3. ![](https://img.php.cn/upload/image/959/859/838/1616340316679135.jpg)
  4. ```html
  5. <!DOCTYPE html>
  6. <html lang="en">
  7. <head>
  8. <meta charset="UTF-8">
  9. <title>Title</title>
  10. </head>
  11. <body>
  12. <form action="demo7.php" method="post">
  13. <fieldset>
  14. <legend>必填项</legend>
  15. <div>
  16. <label for="User_name">账号:</label>
  17. <input type="text" id="User_name" name="User_name" autofocus required placeholder="必须为6-8位">
  18. </div>
  19. <div>
  20. <label for="password">密码:</label>
  21. <input type="password" id="password" name="password" required placeholder="数字加英文组合">
  22. </div>
  23. <div>
  24. <label for="email">邮箱:</label>
  25. <input type="email" id="email" name="email" required placeholder="demo@qq.com">
  26. </div>
  27. </fieldset>
  28. <fieldset>
  29. <legend>性别爱好</legend>
  30. <div>
  31. <label for="mi">性别:</label>
  32. <input type="radio" name="gender" value="男士" id="nan"/><label for="nan">男士</label>
  33. <input type="radio" name="gender" value="女士" id="nv"/><label for="nv">女士</label>
  34. <input type="radio" name="gender" value="保密" id="mi" checked/><label for="mi">保密</label>
  35. </div>
  36. <div>
  37. <label>爱好:</label>
  38. <input type="checkbox" name="aihao[]" id="biancheng" checked><label for="biancheng">编程</label>
  39. <input type="checkbox" name="aihao[]" id="guangjie"><label for="guangjie">逛街</label>
  40. <input type="checkbox" name="aihao[]" id="daqiu" checked><label for="daqiu">打球</label>
  41. <input type="checkbox" name="aihao[]" id="sheying"><label for="sheying">摄影</label>
  42. <input type="checkbox" name="aihao[]" id="jianshen"><label for="jianshen">健身</label>
  43. </div>
  44. </fieldset>
  45. <div>
  46. <label>下拉选择:</label>
  47. <select name="xiala" id="">
  48. <option value="金牌会员">金牌会员</option>
  49. <option value="银牌会员">银牌会员</option>
  50. <option value="至尊会员">至尊会员</option>
  51. <option value="钻石会员">钻石会员</option>
  52. </select>
  53. </div>
  54. <div>
  55. <label>搜索选框:</label>
  56. <input type="search" name="search" id="" list="mykey"/>
  57. <datalist id="mykey">
  58. <option value="苹果手机"></option>
  59. <option value="小米手机"></option>
  60. <option value="华为手机"></option>
  61. <option value="一加手机"></option>
  62. </datalist>
  63. </div>
  64. <div style="margin-top: 10px">
  65. <button type="submit">提交注册</button>
  66. </div>
  67. </form>
  68. </body>
  69. </html>