HTML中表格和表单的应用实例

表格实战：课程表

HTML表格制作课程表

小学三(一)班课程表
时间	星期一	星期二	星期三	星期四	星期五
上午	数学	数学	数学	阅读	英语
	语文	体育	语文	数游	数学
	美术	语文	音乐	科学	劳技
中午休息
下午	思品	音乐	书法	作文	体育
下午	美术	体活	英语	作文	省情
备注:	每天下午16:50 放学回家

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><title>表格实战：课程表</title></head><body><tableborder="1"width="80%"cellspacing="0"cellpadding="5"align="center"><caption><h3>小学三(一)班课程表</h3></caption><!--表头开始--><thead><trbgcolor="lightcyan"><!--th:是添加了加粗和居中样式的的td,是td的plus加强版,适合做表头标题--><th>时间</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr></thead><!--表体1:上午三节课--><tbodyalign="center"><tr><throwspan="3">上午</th><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></tbody><!--中间休息,整行所有单元格合并--><tbody><tralign="center"bgcolor="#dedede"><tdcolspan="6">中午休息</td></tr></tbody><!--下午课程结构与上午类似,直接复制上午课程的代码--><!--下午没有星期几,直接将课程上移到第一行中即可--><tbodyalign="center"><tr><throwspan="2">下午</th><td>思品</td><td>音乐</td><td>书法</td><td>作文</td><td>体育</td></tr><tr><td>美术</td><td>体活</td><td>英语</td><td>作文</td><td>省情</td></tr></tbody><!--表尾:底部备注--><tfoot><trbgcolor="lightcyan"><td>备注:</td><!--从第2列开始水平合并5列--><tdcolspan="5">每天下午16:50放学回家</td></tr></tfoot></table></body></html>

11111

HTML表单的应用实例

表单信息

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>表单信息</title></head><body><!--表单：get方式数据信息在url中，post方式数据信息在请求体中。--><formaction=""method="post"><div><label>用户：<inputtype="text"/></label></div><div><label>密码：<inputtype="password"/></label></div><div><label>邮箱：<inputtype="text"/></label></div><div><labelfor="female">性别</label><inputtype="radio"name="gender"id="male"value="male"/><labelfor="male">男</label><inputtype="radio"name="gender"id="female"value="female"/><labelfor="female">女</label></div><div><label>爱好</label><inputtype="checkbox"name="hobby[]"id="game"/><labelfor="game">游戏</label><inputtype="checkbox"name="hobby[]"id="cooking"/><labelfor="cooking">烹饪</label><inputtype="checkbox"name="hobby[]"id="travel"/><labelfor="travel">旅游</label><inputtype="checkbox"name="hobby[]"id="shoot"/><labelfor="shoot">摄影</label></div><div><label>等级</label><selectname="level"id=""><optionvalue="1">铜牌会员</option><optionvalue="2">银牌会员</option><optionvalue="3"selected>金牌会员</option><optionvalue="4">钻石会员</option></select></div><div><labelfor="">关键字:</label><inputtype="search"name="search"id=""list="my-key"/><datalistid="my-key"><optionvalue="html"></option><optionvalue="css"></option><optionvalue="javacript"></option></datalist></div><div><inputtype="submit"value="提交"/></div></form></body></html>

小学三(一)班课程表

更多相关文章

随机推荐