1.草稿
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <!-- 基本属性 --> <!-- border 设置边框线的粗细 --> <!-- tb 表标题 --> <!-- colspan 后面的数字是多少就包括多少列--> <!-- rowspan 后面的数字是多少就包括多少行--> <!-- caption 表头--> <table border="2"> 1.不会跨行的表格（基本表格） <tr> <td>1行1列的单元格</td> <td>1行2列的单元格</td> <td>1行3列的单元格</td> </tr> <tr> <td>2行1列的单元格</td> <td>2行2列的单元格</td> <td>2行3列的单元格</td> </tr> </table> <p></p> <!-- 2.跨列的表格（跨行的那一列长一些，可包括多个值） --> <table width="200" border="1"> <tr> <tb>学生成绩</tb> <td colspan="3">学生成绩</td> </tr> <tr> <td>语文</td> <td>98</td> </tr> <tr> <td>数学</td> <td>95</td> </tr> </table> <p></p> <!-- 3.跨行的表格 (跨行的那一行长一些，可包括多个值)--> <table width="200" border="1"> <tr> <td rowspan="2">张三</td> <td>语文</td> <td>98</td> </tr> <tr> <td>数学</td> <td>95</td> </tr> --> <!-- <!-- <tr> --> <td rowspan="2">李四</td> <td>语文</td> <td>88</td> </tr> <tr> <td>数学</td> <td>91</td> </tr> </table> <P></P> <table width="500" border="1"> <tr> <td colspan="3">家用电器</td> </tr> <tr> <td>家用电器</td> <td>大家电</td> <td>洗衣机</td> </tr> <tr> <td>电热水器</td> <td>家庭音响</td> <td>热水器</td> </tr> <tr> <td colspan="3">书籍</td> </tr> <tr> <td>文学</td> <td>传记</td> <td>艺术</td> </tr> <tr> <td>军事</td> <td>财经</td> <td>世界名著</td> </tr> </table> <p></p> 跨行跨列的表格 <table width="500" border="1"> <tr> <td rowspan="2">收藏</td> <td>钱币</td> <td>紫砂</td> <td>瓷器</td> </tr> <tr> <td>古玩</td> <td>和田玉</td> <td>字画</td> </tr> <tr> <td>家居</td> <td>灯具</td> <td>自行车</td> <td>皮包</td> </tr> </table> <p></p> <table width="200" border="1"> <tr> <td colspan="3">学生成绩</td> </tr> <tr> <td rowspan="2">张三</td> <td>语文</td> <td>98</td> </tr> <tr> <td>数学</td> <td>95</td> </tr> <tr> <td rowspan="2">李四</td> <td>语文</td> <td>88</td> </tr> <tr> <td>数学</td> <td>91</td> </tr> </table> <p></p> <!-- 4.tfoot等分组用法 ()--> <table width="30%"> <caption>年终数据报表</caption> <!-- 设置表头 --> <thead style="background-color: aqua;"> <tr> <th>月份</th> <th>收入（RMB）</th> </tr> </thead> <tbody style="background-color: #9CC;"> <tr> <td>一月</td> <td>100</td> </tr> <tr> <td>2月</td> <td>80</td> </tr> <tr> <td>3月</td> <td>300</td> </tr> <tr> <td>4月</td> <td>400</td> </tr> <tr> <td>5月</td> <td>100</td> </tr> <tr> <td>6月</td> <td>200</td> </tr> </tbody> </thead> </tbody> <tfoot style="background: #FF0"> <tr> <td>平均月收入</td> <td>196.67</td> </tr> <tr> <td>总计</td> <td>1180</td> </tr> </tfoot> </table> <p></p> <!-- 6.图文布局 --> <table border="1px"> <tr> <td colspan="2"><img src="img/a_title.jpg" alt="公告栏"></td> </tr> <td rowspan="4"><img src="img/a_left.jpg" alt="公告左侧图" /></td> <td>大学要求老师开网店</td> </tr> <tr> <td>安全锤网上大热销</td> </tr> <tr> <td>商城竟成网购试衣间</td> </tr> <tr> <td>2万网上开十间连锁店</td> </tr> </table> <p></p> <!-- 7.登录表单 --> <form method="post" action="login_success.htm"></form> <table> <tr> <td><img src="img/title_login_2.png" alt="alt" /></td> <td colspan="2"> </td> </tr> <tr> <td></td> <td>会员名:</td> <td> <input name="sname" type="text" size="15" />（可包含 a-z、0-9 和下划线） </td> </tr> <tr> <td></td> <td>密 码:</td> <td><input name="pass" type="password" size="15" />（至少包含 6 个字符）</td> </tr> <tr> <td></td> <td colspan="2"> <input type="image" style="border:0px;" name="Button" src="./img/login.gif" /> </td> </tr> </table> <p></p> <!-- 8.表格嵌套 --> <table border="10"> <tr> <td> <table border="2"> <tr> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="25px"> </td> </tr> </table> <table border="2"> <tr> <td width="25px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> </tr> </table> <table border="2"> <tr> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="25px"> </td> </tr> </table> </td> <td> <table border="2"> <tr> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="25px"> </td> </tr> </table> <table border="2"> <tr> <td width="25px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> </tr> </table> <table border="2"> <tr> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="25px"> </td> </tr> </table> </td> </tr> </table> </body> </html>
2.跨行跨列表格，代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table width="500" border="1"> <tr> <td colspan="4">商品成绩</td> </tr> <tr> <td rowspan="3">虚拟</td> <td>移动</td> <td>联通</td> <td>小灵通</td> </tr> <tr> <td>充值卡</td> <td>彩票</td> <td>双色球</td> </tr> <tr> <td>梦幻 </td> <td>QQ</td> <td>游戏币</td> </tr> <tr> <td rowspan="3">护肤</td> <td>美容护肤</td> <td>媒体</td> <td>精油</td> </tr> <tr> <td>彩妆</td> <td>香水</td> <td>没法</td> </tr> <tr> <td>个人护肤 </td> <td>保健</td> <td>按摩器械</td> </tr> </table> </body> </html>
3.商品分类页
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- tr行 td列 --> <table> <tr> <td colspan="4"><img src="img/list_bg.gif"></td> <!-- <td>商品</td> <td>商品</td> <td>商品</td> --> </tr> <tr> <td rowspan="4"><input type="checkbox" name="" id="" value="" /></td> <td>商品图片</td> <td>商品名称/卖家</td> <td>价格</td> </tr> <tr> <!-- <td>商品</td> --> <td rowspan="3"><img src="img/list0.jpg"></td> <td>三国群英转免费区</td> <td><br><br>一口价</td> </tr> <tr> <!-- <td>商品</td> --> <!-- <td>商品</td> --> <td>卖家：lingtrue</td> <td><br><br>283.30</td> </tr> <tr> <!-- <td>商品</td> --> <!-- <td>商品</td> --> <td><img src="img/online_pic.gif"> <img src="img/list_tool_fav1.gif">收藏</td> <td></td> </tr> <tr> <td rowspan="4"><input type="checkbox" name="" id="" value="" /></td> <td><br></td> <td><br></td> <td><br></td> </tr> <tr> <!-- <td>商品</td> --> <td rowspan="3"><img src="img/list3.jpg"></td> <td>三国群英转免费区</td> <td><br><br>一口价</td> </tr> <tr> <!-- <td>商品</td> --> <!-- <td>商品</td> --> <td>卖家：蓝天</td> <td><br><br>486.30</td> </tr> <tr> <!-- <td>商品</td> --> <!-- <td>商品</td> --> <td><img src="img/online_pic.gif"> <img src="img/list_tool_fav1.gif">收藏</td> <td></td> </tr> </table> </body> </html>
4.注册表单，代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table> <tr> <td>登录名：</td> <td><input type="text" name="" id="" value="" /></td> <td>（可包含a-z、0-9和下划线）</td> <td ><img src="img/read.gif" ><span style="color: black;"><b>阅读服务协议</b></span></td> </tr> <tr> <td>密码：</td> <td><input type="password" name="" id="" value="" /></td> <td>（至少包含6个字符）</td> <td rowspan="8"><textarea rows="20" cols="30">欢迎阅读服务条款协议······</textarea></td> </tr> <tr> <td>再次输入密码：</td> <td><input type="password" name="" id="" value="" /></td> <!-- <td></td> --> <!-- <td>商品</td> --> </tr> <tr> <td>电子邮箱：</td> <td><input type="email" name="" id="" value="" /></td> <td>（必须包括@符号）</td> <!-- <td>商品</td> --> </tr> <tr> <td>性别：</td> <td><img src="img/Male.gif" ><input type="radio" name="sex" id="" value="男" />男<img src="img/Female.gif" ><input type="radio" name="sex" id="" value="女" />女</td> <td></td> <!-- <td>商品</td> --> </tr> <tr> <td>头像</td> <td><input type="file" name="" id="" value="" /></td> <td></td> <!-- <td>商品</td> --> </tr> <tr> <td>爱好：</td> <td><input type="checkbox" name="" id="" value="" />运动<input type="checkbox" name="" id="" value="" />聊天<input type="checkbox" name="" id="" value="" />玩游戏</td> <td></td> <!-- <td>商品</td> --> </tr> <tr> <td>喜欢的城市</td> <td><select name=""> <option value="">请选择</option> </select></td> <td></td> <!-- <td>商品</td> --> </tr> <tr> <td></td> <td><input type="" name="" id="" placeholder="hhdsad" /><input type="submit" name="" id="" value="重填" /></td> <td>商品</td> <!-- <td>商品</td> --> </tr> </table> </body> </html>
5. 手写表格布局数据显示，代码如下：
<!DOCTYPE html>
<html>
<!-- 写一个合并就要注意行和列的数量变化 -->
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table width="800" border="1">
<caption>年度工资报告</caption>
<tr style="background-color: aqua;">
<td ><b>区域办事处</b></td>
<td ><b>岗位</b></td>
<td ><b>姓名</b></td>
<td ><b>工资（RMN）</b></td>
</tr>
<tr>
<td rowspan="3" style="background-color: cadetblue;">华东区</td>
<td rowspan="2" style="background-color: cadetblue;">人事专员</td>
<td style="background-color: cadetblue;">张明</td>
<td style="background-color: cadetblue;">1500</td>
</tr>
<tr style="background-color: cadetblue;">
<!-- <td>1</td> -->
<!-- <td><td> -->
<td>网红</td>
<td>1500</td>
</tr>
<tr style="background-color: cadetblue;">
<!-- <td></td> -->
<td rowspan="3">软件开发工程</td>
<td>李开艳</td>
<td>6000</td>
</tr>
<tr style="background-color: cadetblue;">
<td rowspan="2">中南区</td>
<td>李开元</td>
<td>6000</td>
</tr>
<tr style="background-color: cadetblue;">
<td>梁超</td>
<td>5000</td>
</tr>
<tr style="background-color: yellow;">
<td colspan="3">总计</td>
<!-- <td>1</td> -->
<!-- <td></td> -->
<td>19000</td>
</tr>
</table>
</body>
</html><!DOCTYPE html> <html> <!-- 写一个合并就要注意行和列的数量变化 --> <head> <meta charset="utf-8"> <title></title> </head> <body> <table width="800" border="1"> <caption>年度工资报告</caption> <tr style="background-color: aqua;"> <td ><b>区域办事处</b></td> <td ><b>岗位</b></td> <td ><b>姓名</b></td> <td ><b>工资（RMN）</b></td> </tr> <tr> <td rowspan="3" style="background-color: cadetblue;">华东区</td> <td rowspan="2" style="background-color: cadetblue;">人事专员</td> <td style="background-color: cadetblue;">张明</td> <td style="background-color: cadetblue;">1500</td> </tr> <tr style="background-color: cadetblue;"> <!-- <td>1</td> --> <!-- <td><td> --> <td>网红</td> <td>1500</td> </tr> <tr style="background-color: cadetblue;"> <!-- <td></td> --> <td rowspan="3">软件开发工程</td> <td>李开艳</td> <td>6000</td> </tr> <tr style="background-color: cadetblue;"> <td rowspan="2">中南区</td> <td>李开元</td> <td>6000</td> </tr> <tr style="background-color: cadetblue;"> <td>梁超</td> <td>5000</td> </tr> <tr style="background-color: yellow;"> <td colspan="3">总计</td> <!-- <td>1</td> --> <!-- <td></td> --> <td>19000</td> </tr> </table> </body> </html>
6.手写实现邮箱登录，代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table> <tr> <p></p> <td><span style="font-size: 20px;"><b>邮箱登录</b></span></td> <td></td> <td></td> </tr> <tr> <td></td> <td width="50">用户名</td> <td><input type="text" name="" id="" value="" />@gamgw.com</td> </tr> <tr> <td></td> <td>密 码</td> <td><input type="password" name="" id="" value="" /> 忘记密码了？</td> </tr> <tr> <td></td> <td></td> <td><input type="checkbox" name="" id="" value="" />两周内自动登录<input type="checkbox" name="" id="" value="" />SSL安全登录</td> </tr> <tr> <td></td> <td colspan="2"><img src="img/login.gif" ></td> <!-- <td></td> --> </tr> </table> </body> </html>