表格的跨行合并功能
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格</title> </head> <body> <table border="1" cellspacing="0" cellpadding="5" width="500"> <caption>购物车</caption> <thead> <tr bgcolor="purple"> <th>编号</th> <th>品名</th> <th>单价</th> <th>数量</th> <th>金额</th> <th>分类</th> </tr> </thead> <tbody> <tr> <td width="50">1</td> <td width="200">车载MP3蓝牙接收器</td> <td width="70">100</td> <td width="50">1</td> <td width="80">100</td> <td width="80">汽车</td> </tr> <tr> <td>2</td> <td>MacBookPro</td> <td>8500</td> <td>1</td> <td>8500</td> <td rowspan="2">数码</td> </tr> <tr> <td>3</td> <td>佳能1500D</td> <td>1500</td> <td>1</td> <td>1500</td> </tr> <tr> <td>4</td> <td>T恤</td> <td>50</td> <td>2</td> <td>100</td> <td>衣服</td> </tr> </tbody> <tfoot> <tr> <td colspan="3">合计：</td> <td>5</td> <td>10200</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2.用户注册表单
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单</title> </head> <body> <h3>用户注册</h3> <form action="" method="post"> <p> <label for="usename">帐号:</label> <input type="text" name="usename" id="usename" autofocus placeholder="不予许超过8个字母" requied> </p> <p> <label for="password">密码:</label> <input type="password" id="password" name="password" placeholder="6-12个字母"> </p> <p> <label for="email">邮箱:</label> <input type="email" id="email" name="email" placeholder="example@email.com"> </p> <p> <label for="age">年龄:</label> <input type="number" id="age" name="age" min="16" max="70"> </p> <p> <label for="birthday">生日:</label> <input type="date" id="birthday" name="birthday"> </p> <p> <label for="course">课程:</label> <select name="course" id="course" size="3"> <optgroup label="前端"></optgroup> <option value="1">HTML5</option> <option value="2">CSS3</option> <option value="3">JavScript</option> </optgroup> <optgroup label="后端"> <option value="4">PHP</option> <option value="5">ThinkPHP</option> </optgroup> </select> </p> <p> <label for="programme">爱好</label> <input type="checkbox" name="hobby[]" value="game” id="game"><label for="game">打游戏</label> <input type="checkbox" name="hobby[]" value="programme" id="programme"><label for="programme">撸代码</label> <input type="checkbox" name="hobby[]" value="movies" id="movies" checked><label for="movies">看片</label> </p> <p> <label for="">性别</label> <input type="radio" name="gender" value= id="male"><label for="male">男生</label> <input type="radio" name="gender" value="female" id="female"><label for="female">女生</label> <input type="radio" name="gender" value="secrecy" id="secrecy" checked><label for="secrecy">保密</label> </p> <p> <label for="comment">简介:</label> <textarea name="comment" id="comment" cols="30" rows="10" maxlength="30" placeholder="不超过30个字"></textarea> </p> <P> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重置"> <button type=submit"">提交1</button> <button type="button">提交2</button> </P> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3.后台首页
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>后台主页</title> </head> <body> <h2>后台管理</h2> <ul style="float:left"> <li><a href="102.html">用户管理</a></li> <li><a href="103.html">分类管理</a></li> <li><a href="104.html">商品管理</a></li> <li><a href="105.html">系统设置</a></li> </ul> <iframe srcdoc="<h3>网站后台管理</h3>" frameborder="0" width="600" height="500" name="main"></iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例