简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 表格的基础布局和表单控件的简单应用
Blogger Information
Blog 6
fans 0
comment 0
visits 3251
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
表格的基础布局和表单控件的简单应用
远方
Original
602 people have browsed it

1、表格课程表布局

摘要：运用表格的行和列合并，做一个课程表。
设计表格元素有：table,caption,thead,tbody,tr,th,td,colspan,rowspan…

源码效果图

表格代码图

代码运行效果图

表格效果图

源码示例

  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.     <!-- table>caption -->
  11.     <table border="1" width="800">
  12.         <caption>我的课程表</caption>
  13.         <!-- thead>tr>th*6 -->
  14.         <thead>
  15.             <tr>
  16.                 <th>时间/日期</th>
  17.                 <th>星期一</th>
  18.                 <th>星期二</th>
  19.                 <th>星期三</th>
  20.                 <th>星期四</th>
  21.                 <th>星期五</th>
  22.             </tr>
  23.         </thead>
  24.         <!-- tbody>tr*9>td*6 -->
  25.         <tbody>
  26.             <tr>
  27.                 <td rowspan="4">上午</td>
  28.                 <td rowspan="2" colspan="2">语文</td>
  29.                 <td colspan="2">数学</td>
  30.                 <td>英语</td>
  31.             </tr>
  32.             <tr>
  33.                 <td colspan="2">英语</td>
  34.                 <td>数学</td>
  35.             </tr>
  36.             <tr>
  37.                 <td colspan="5">编程</td>
  38.             </tr>
  39.             <tr>
  40.                 <td colspan="5">上机实战</td>
  41.             </tr>
  42.             <tr>
  43.                 <td rowspan="4">下午</td>
  44.                 <td colspan="5">体育</td>
  45.             </tr>
  46.             <tr>
  47.                 <td rowspan="2">英语</td>
  48.                 <td rowspan="2">语文</td>
  49.                 <td colspan="3">数学</td>
  50.             </tr>
  51.             <tr>
  52.                 <td>英语</td>
  53.                 <td colspan="2">语文</td>
  54.             </tr>
  55.             <tr>
  56.                 <td>美术</td>
  57.                 <td>自习</td>
  58.                 <td>政治</td>
  59.                 <td>历史</td>
  60.                 <td>地理</td>
  61.             </tr>
  62.         </tbody>   
  63.     </table>
  64. </body>
  65. </html>

2、表单简单示例

摘要：尽可能运用所学表单元素，自己整理创建一个表单

代码效果图

代码截图

运行效果图

运行2图

源码示例

  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.     <!-- form>fieldset>legend{表单注册} -->
  11. <form action="" style="width:300px;">
  12. <fieldset>
  13. <legend>表单注册</legend>
  14. 用户名：<input type="text" name="uname" id="uname" autofocus><br>
  15. 密码：<input type="password" name="pwd" id="pwd"><br>
  16. 邮箱：<input type="email" name="emailx" id="emailx"><br>
  17. 年龄：<input style="width:170px" type="number" min="18" max="50"  name="age" id="age"
  18.  placeholder="请输入数字..."><br>
  19. 身高：<input type="number" name="shengao" id="shengao" placeholder="请输入数字...">
  20. <small><em>CM</em></small><br>
  21. 体重：<input type="number" name="tizhong" id="tizhong" placeholder="请输入数字...">
  22. <small><em>KG</em></small><br>
  23. 搜索：<input type="search" name="ss" placeholder="请输入关键字搜索" id="ss"><br>
  24. 颜色：<input type="color" name="ys" id="ys" value="#ff0000"><br>
  25. 日期：<input type="date" name="rq" id="rq"><br>
  26. 周：<input type="week" name="zhou" id="zhou"><br>
  27. 月份：<input type="month" name="yuef" id="yuef"><br>
  28. 时间：<input type="datetime-local" name="" id=""><br>
  29. 性别：<input type="radio" name="sex" value="男">男<input type="radio" name="sex" value="女" checked>女<br>
  30. 编程语言：<input type="checkbox" name="yuyan[]" value="PHP" checked>PHP
  31. <input type="checkbox" name="yuyan[]" value="JAVA">JAVA
  32. <input type="checkbox" name="yuyan[]" value="GO">GO<br>
  33. 学历：<select name="xueli" id="xueli"><option value="" disabled selected>请选择</option>
  34. <option value="大学">大学</option><option value="高中">高中</option>
  35. <option value="初中">初中</option><option value="小学">小学</option></select><br>
  36. 附件：<input type="file" name="wenjian" id="wenjian">
  37. 简介：<textarea name="" id="" cols="30" rows="10" style="text-indent:2em;">hello php.cn...</textarea>
  38. <input type="reset" value="重置"><input type="submit" value="提交">
  39. </fieldset>
  40. </form>
  41. </body>
  42. </html>
Correcting teacher：PHPzPHPz

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！