1、跨行合并
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <table border="1" cellspacing="0" cellpadding="9" width="400" align="center"> <!-- 表格标题--> <caption>表格</caption> <!-- 表格头部--> <thead> <tr> <th>1-1</th> <th>1-2</th> <th>1-3</th> <th>1-4</th> <th>1-5</th> </tr> </thead> <!-- 表格主体--> <tbody> <tr> <th colspan="2">跨列合并</th> <!-- <th>2-2</th>--> <th>2-3</th> <th rowspan="2">跨行合并</th> <th>2-5</th> </tr> <tr> <th>3-1</th> <th>3-2</th> <th>3-3</th> <!-- <th>3-4</th>--> <th>3-5</th> </tr> <tr> <th rowspan="3" colspan="2">跨行列合并</th> <!-- <th>4-2</th>--> <th>4-3</th> <th>4-4</th> <th>4-5</th> </tr> <tr> <!-- <th>5-1</th>--> <!-- <th>5-2</th>--> <th>5-3</th> <th>5-4</th> <th>5-5</th> </tr> <tr> <!-- <th>6-1</th>--> <!-- <th>6-2</th>--> <th>6-3</th> <th>6-4</th> <th>6-5</th> </tr> </tbody> <!-- 表格尾部--> <tfoot> <tr> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2、用户注册表单
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <h2 >用户注册</h2> <form action="" method="get" > <!-- 用户--> <label for="username">账号：</label> <input type="text" id="username" name="username" placeholder="不能超过10个字符" autofocus><br><br> <!-- 密码--> <label for="password">密码：</label> <input type="password" id="password" name="password" placeholder="8-16位的字母和数字组合" ><br><br> <!-- 邮箱--> <label for="email">邮箱：</label> <input type="email" id="email" name="email" placeholder="必须使用正确的邮箱格式" ><br><br> <!-- 生日--> <label for="birthday">生日：</label> <input type="date" id="birthday" name="birthday" ><br><br> <!-- 地区--> <label for="">地区：</label> <select name="area" id="area" size="1">选择地区 <optgroup label="中国"> <option value="0" disabled>请选择</option> <option value="1">北京</option> <option value="2">上海</option> <option value="3">广州</option> </optgroup> <optgroup label="美国"> <option value="0" disabled>请选择</option> <option value="1">纽约</option> <option value="2">旧金山</option> <option value="3">拉斯维加斯</option> </optgroup> <optgroup label="***"> <option value="0" disabled>请选择</option> <option value="1">大阪</option> <option value="2">东京</option> <option value="3">名古屋</option> </optgroup> </select><br><br> <!--复选框--> <label for="programme">爱好：</label> <input type="checkbox" name="hobby" value="programme">读书 <input type="checkbox" name="hobby" value="programme">吃零食 <input type="checkbox" name="hobby" value="programme">看电视 <input type="checkbox" name="hobby" value="programme">玩游戏 <input type="checkbox" name="hobby" value="programme" checked>XXOO <br><br> <!-- 单选框--> <label for="sex">性别：</label> <input type="radio" name="sex" value="male" id="male">男 <input type="radio" name="sex" value="female" id="female">女 <input type="radio" name="sex" value="unknown" id="unknown">未知 <br><br> <!-- 文本域--> <label for="sex">个人介绍：</label><br> <textarea name="comment" id="comment" cols="50" rows="8" maxlength="50" placeholder="请填写你的个人简要"></textarea> <br><br> <!--按钮--> <input type="submit" name="submit" value="提交"> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3、后台首页