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

table element可以归因于边框宽度、单元格填充和单元格间距。

所以你可以像这样创建一个表格(其中单位是没有长度的数字，表示不是 2px 而是 2):

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

TABLE 的属性列表:摘要 %文本；宽度长度;边框 %Pixels;框架%TFrame；规则 %TRules；单元格间距%长度； cellpadding %Length;

但随着最近的网页设计技术，建议将 html 标记与布局和设计元素分开。为此，您必须使用 css。

你可以这样实现:

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

对于 css，您还必须指定边框是折叠还是分开，这将对“边框间距”产生影响。

table {border-collapse: collapse;}

为了避免一些遗留的浏览器错误，我邀请你在关闭前不要留下空白空间 </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;}

您将能够以最简单的方式格式化您的表格:

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