Blogger Information
Blog 2
fans 0
comment 1
visits 1408
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html内table表格的与form表单基础写法!
沐童
Original
879 people have browsed it

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>
Correcting teacher:天蓬老师天蓬老师

Correction status:qualified

Teacher's comments:代码放的位置不对
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post