?????
在頁(yè)面布局時(shí)經(jīng)常會(huì)使用到table,但如果使其border=1,會(huì)不好看;
如果使用border=0,而td的邊框又不好控制,如何實(shí)現(xiàn)細(xì)邊框呢?
步驟:
1、放一個(gè)div,內(nèi)置table,利于控制樣式(style="margin: 30px auto;" 頁(yè)面居中)。
2、給table一個(gè)背景色,要稍深色并設(shè)cellpadding="1" cellspacing="1"(cellpadding="1" cellspacing="1" bgcolor="#DCDCDC" border="0" align="center")。
3、最后設(shè)td的樣式bgcolor="#FFFFFF"白色。
4、總結(jié):背景色深,背景色淺,而table的cellpadding="1" cellspacing="1"所以就出現(xiàn)了一個(gè)細(xì)邊。
效果圖:
如果使用border=0,而td的邊框又不好控制,如何實(shí)現(xiàn)細(xì)邊框呢?
步驟:
1、放一個(gè)div,內(nèi)置table,利于控制樣式(style="margin: 30px auto;" 頁(yè)面居中)。
2、給table一個(gè)背景色,要稍深色并設(shè)cellpadding="1" cellspacing="1"(cellpadding="1" cellspacing="1" bgcolor="#DCDCDC" border="0" align="center")。
3、最后設(shè)td的樣式bgcolor="#FFFFFF"白色。
4、總結(jié):背景色深,背景色淺,而table的cellpadding="1" cellspacing="1"所以就出現(xiàn)了一個(gè)細(xì)邊。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 細(xì)邊框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;">
新用戶注冊(cè)
</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;">
確認(rèn)密碼
</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">-請(qǐng)選擇-</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>
效果圖:
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索:z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系: 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力,如果您喜歡我的文章,感覺(jué)我的文章對(duì)您有幫助,請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長(zhǎng)非常感激您!手機(jī)微信長(zhǎng)按不能支付解決辦法:請(qǐng)將微信支付二維碼保存到相冊(cè),切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元

