如何減少表html中td之間的空間？

Question

我設計了一張如下所示的表格。我需要避免用戶名和它的文本框之間的空間，如密碼和它的文本框。請告訴我如何做到這一點？

<table> 
    <tr> 
    <td> 
     UserName 
    </td> 
    <td style="text-align:left"> 
     <input id="userName" type="text" value="" placeholder="UserName" /> 
    </td> 
    </tr> 
    <tr> 
    <td> 
     password 
    </td> 
    <td style="text-align:left"> 
     <input id="password" type="text" value="" placeholder="password" /> 
    </td> 
    </tr> 
    <tr> 
    <td colspan="2" style="text-align:left"> 
     <input id="btnsearch" type="button" value="Search" /> 
    </td> 
    </tr> 
</table> 

一些額外的空間位於用戶名和文本框之間，與密碼和密碼文本框相同。如何減少它們之間的空間請告訴我。

Answer 1

將cellspacing，CELLPADDING和邊框可以幫助你實現這個目標：

<table cellSpacing="0" cellPadding="0" border="0" style="border-collapse:collapse;"> 
     <tr> 
       <td style="text-align:left"> 
        UserName<br/> 
       <input id="userName" type="text" value="" placeholder="UserName"/> 
       </td> 
     </tr> 
     <tr> 
       <td style="text-align:left"> 
       password<br/> 
       <input id="password" type="text" value="" placeholder="password"/> 
       </td> 
      </tr> 
      <tr> 
      <td colspan="2" style="text-align:left"> 
      <input id="btnsearch" type="button" value="Search"/> 
      </td> 
      </tr> 
     </table> 

如果你需要他們緊緊地貼着把它們放在同一個TD，並通過<br/>進行斷行。

Answer 2

在表標籤添加一些屬性像

<table cellSpacing='0' cellPadding='0'> 

Answer 3

的table element可以與邊框寬度，CELLPADDING和CELLSPACING歸因。

所以，你可以創建一個表像這樣（其中單位數字沒有lenght，是指不爲2px但2）： 總結％：

表的屬性的

<table border="0" cellpadding="0" cellspacing="0"> 

名單文本;寬度長度;邊框％像素;框架％TFrame;規則％TRules; cellspacing％長度; cellpadding％長度;

但是，最近的網頁設計技術，建議從佈局和設計元素分開的HTML標記。要做到這一點，你將不得不使用CSS。

可以達到同樣的，像這樣：

table {border-spacing:0;border-width:0;} 
table td {padding:2px;border-width:0;} 

使用CSS，你也必須指定，如果邊界將要倒塌或分離，女巫會對「邊界間距」的效果。

table {border-collapse: collapse;} 

爲了避免一些遺留browswers錯誤，我請你收</td>像以前一樣不留一個空的空間：<input id="btnsearch" type="button" value="Search"/></td>（但這是成爲，如果你開發的老前輩，除了過時）

與您的情況得出結論：

table {border-collapse:collapse;border-spacing:0;border:0 none;} 
/* fix padding of TD to suit your needs */ 
table td {border:0 none;padding:2px;text-align:left;} 

，你將能夠格式化表格simpliest方式：

<table> 
    <tr> 
     <td></td> 
    </tr> 
</table> 

Answer 4

Your Fiddle

編輯部分：

<table cellSpacing='0' cellPadding='0' border="0" > 

Updated Fiddle

爲了更多地瞭解CELLSPACING & CELLPADDING Click Here