如何减少表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