HTML表格制作课程表
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>表格实战：课程表</title></head><body><tableborder="1"width="80%"cellspacing="0"cellpadding="5"align="center"><caption><h3>小学三(一)班课程表</h3></caption><!-- 表头开始 --><thead><tr bgcolor="lightcyan"><!-- th:是添加了加粗和居中样式的的td,是td的plus加强版,适合做表头标题 --><th>时间</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr></thead><!-- 表体1: 上午三节课 --><tbody align="center"><tr><th rowspan="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><tr align="center" bgcolor="#dedede"><td colspan="6">中午休息</td></tr></tbody><!-- 下午课程结构与上午类似,直接复制上午课程的代码 --><!-- 下午没有星期几,直接将课程上移到第一行中即可 --><tbody align="center"><tr><th rowspan="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><tr bgcolor="lightcyan"><td>备注:</td><!-- 从第2列开始水平合并5列 --><td colspan="5">每天下午16:50 放学回家</td></tr></tfoot></table></body></html>
HTML表单的应用实例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>表单信息</title></head><body><!-- 表单：get方式数据信息在url中，post方式数据信息在请求体中。 --><form action="" method="post"><div><label>用户：<input type="text" /> </label></div><div><label>密码：<input type="password" /></label></div><div><label>邮箱：<input type="text" /> </label></div><div><label for="female">性别：</label><input type="radio" name="gender" id="male" value="male" /><label for="male">男</label><input type="radio" name="gender" id="female" value="female" /><label for="female">女</label></div><div><label>爱好：</label><input type="checkbox" name="hobby[]" id="game" /><label for="game">游戏</label><input type="checkbox" name="hobby[]" id="cooking" /><label for="cooking">烹饪</label><input type="checkbox" name="hobby[]" id="travel" /><label for="travel">旅游</label><input type="checkbox" name="hobby[]" id="shoot" /><label for="shoot">摄影</label></div><div><label>等级：</label><select name="level" id=""><option value="1">铜牌会员</option><option value="2">银牌会员</option><option value="3" selected>金牌会员</option><option value="4">钻石会员</option></select></div><div><label for="">关键字:</label><input type="search" name="search" id="" list="my-key" /><datalist id="my-key"><option value="html"></option><option value="css"></option><option value="javacript"></option></datalist></div><div><input type="submit" value="提交" /></div></form></body></html>