HTML表格制作课程表
| 时间 | 星期一 | 星期二 | 星期三 | 星期四 | 星期五 |
|---|---|---|---|---|---|
| 上午 | 数学 | 数学 | 数学 | 阅读 | 英语 |
| 语文 | 体育 | 语文 | 数游 | 数学 | |
| 美术 | 语文 | 音乐 | 科学 | 劳技 | |
| 中午休息 | |||||
| 下午 | 思品 | 音乐 | 书法 | 作文 | 体育 |
| 美术 | 体活 | 英语 | 作文 | 省情 | |
| 备注: | 每天下午16:50 放学回家 | ||||
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>表格实战：课程表</title> </head> <body> <table border="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>
11111
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>