在页面布局时经常会使用到table,但如果使其border=1,会不好看;
如果使用border=0,而td的边框又不好控制,如何实现细边框呢?
步骤:
1、放一个div,内置table,利于控制样式(style="margin: 30px auto;" 页面居中)。
2、给table一个背景色,要稍深色并设cellpadding="1" cellspacing="1"(cellpadding="1" cellspacing="1" bgcolor="#DCDCDC" border="0" align="center")。
3、最后设td的样式bgcolor="#FFFFFF"白色。
4、总结:背景色深,背景色浅,而table的cellpadding="1" cellspacing="1"所以就出现了一个细边。
效果图:
如果使用border=0,而td的边框又不好控制,如何实现细边框呢?
步骤:
1、放一个div,内置table,利于控制样式(style="margin: 30px auto;" 页面居中)。
2、给table一个背景色,要稍深色并设cellpadding="1" cellspacing="1"(cellpadding="1" cellspacing="1" bgcolor="#DCDCDC" border="0" align="center")。
3、最后设td的样式bgcolor="#FFFFFF"白色。
4、总结:背景色深,背景色浅,而table的cellpadding="1" cellspacing="1"所以就出现了一个细边。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 细边框Table制作 </TITLE> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> </HEAD> <BODY> <!--正文--> <div id="AddNew"> <fieldset> <legend>用户管理:</legend> <div class="role" style="margin: 30px auto;"> <table cellpadding="1" cellspacing="1" bgcolor="#DCDCDC" border="0" align="center" width="459"> <tr> <th colspan="2" style="background-color:#7ABAFF;"> 新用户注册 </th> </tr> <tr> <td class="w80" bgcolor="#FFFFFF" style="text-align: right; height: 30px;"> 用户名 </td> <td bgcolor="#FFFFFF" align="center"> <input name="txtUserName" type="text" id="txtUserName" style="width:150px;" /> </td> </tr> <tr> <td bgcolor="#FFFFFF" style="text-align: right; height: 30px;"> 密码 </td> <td bgcolor="#FFFFFF" align="center"> <input name="txtPassword" type="password" id="txtPassword" style="width:150px;" /> </td> </tr> <tr> <td bgcolor="#FFFFFF" style="text-align: right; height: 30px;"> 确认密码 </td> <td bgcolor="#FFFFFF" align="center"> <input name="txtConfirmPassword" type="password" id="txtConfirmPassword" style="width:150px;" /> </td> </tr> <tr> <td bgcolor="#FFFFFF" style="text-align: right; height: 30px;"> 邮箱 </td> <td bgcolor="#FFFFFF" align="center"> <input name="txtEmail" type="text" id="txtEmail" style="width:150px;" /> </td> </tr> <tr> <td bgcolor="#FFFFFF" style="text-align: right; height: 30px;"> 角色 </td> <td bgcolor="#FFFFFF" align="center"> <select name="ddlRole" id="ddlRole" style="width:155px;"> <option value="-1">-请选择-</option> <option value="1">Admin</option> <option value="2">SuperAdmin</option> </select> </td> </tr> <tr> <td colspan="2" class="Button" align="center"> <img src="RegisterButton.gif"/> </td> </tr> </table> </div> </fieldset> </div> <!--正文 end--> </BODY> </HTML>
效果图: