09 使用table布局 设计企业邮箱登陆界面
布局使用的表格<table></table>
table表格可以放置背景图：
布局前可以给border加边界。
布局完成后再将border边界去除。
设计思路：
一共使用了3个table元素，使table中表格的子元素也可以嵌套table
代码：
<html> <head> <title>企业邮箱</title> </head> <body> <table width="100%" border=0px> <tr height="150px"><td> </td><td> </td><td> </td></tr> <tr><td width="350px"> </td><td> <table border=0px width="540px" height="300px" background="mail.jpg"> <tr height="60px" ><td > </td><td> </td></tr> <tr ><td width=230px> </td><td> <!--用form包起来--> <table height="100%" border=0px > <form action="main.html" method="post"> <tr ><td>用户名:</td><td><input type="text" name="username" /></td></tr> <tr ><td>密 码：</td><td><input type="password" name="pwd" /></td></tr> <tr align="center"><td colspan="2"><input type="submit" value="登陆邮箱" /> <input type="reset" value="重新填写" /></td></tr> <tr align="center"><td colspan="2"><a href="">找回密码</a> <a href="">注册用户</a></td></tr> </form> </table> </td></tr> <tr><td> </td><td> </td></tr> </table> </td><td> </td></tr> <tr><td> </td><td> </td><td> </td></tr> </table> </body> </html>
效果图去除border前：
效果图去除border后：
