完成表格的跨行合并功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <table border="1"> <tr> <td>一</td> <td>二</td> <td>三</td> <td rowspan="2">四和八</td> </tr> <tr> <td>五</td> <td>六</td> <td>七</td> </tr> <tr> <td>九</td> <td>十</td> <td>十一</td> <td>十二</td> </tr> </table> </body> </html>
点击 "运行实例" 按钮查看在线实例
独立完成一个用户注册表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <form action=""> <table border="1" align="center"> <tr> <td>用户名</td> <td><input type="text" name="" id=""></td> </tr> <tr> <td>密码</td> <td><input type="password" name="" id=""></td> </tr> <tr> <td>性别</td> <td> <select name="" id=""> <option value ="男">男</option> <option value ="女">女</option> </select> </td> </tr> <tr> <td>邮箱</td> <td> <input type="email" > </td> </tr> <tr> <td colspan="2"><input type="submit" value="注册"></td> </tr> </table> </form> </body> </html>
点击 "运行实例" 按钮查看在线实例
简易的后台首页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <table border="1" align="center" > <tr><td align="center" colspan="4"><h1>后台管理</h1></td></tr> <tr> <td><b>首页-添加商品</b></td> <td>管理商品</td> <td>管理用户</td> <td>退出账号</td> </tr> <tr> <td colspan="4"> <form action=""> <table> <tr> <td> 商品名称 </td> <td> <input type="text" name="" id=""> </td> </tr> <tr> <td> 商品价格 </td> <td> <input type="number" name="" value="0" min="0" id=""> </td> </tr> <tr> <td> 上架日期 </td> <td> <input type="date" > </td> </tr> <tr> <td align="center" colspan="2"> <input type="submit" value="确定添加"> </td> </tr> </table> </form> </td> </tr> </table> </body> </html>
点击 "运行实例" 按钮查看在线实例