How to reduce the space between the td in table html?

I design a table like the below. I need to avoid the space between username and it's textbox like as password and it's textbox. Please tell me how to do this?

<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>

Some extra space is between username and textbox and same as password and pwd textbox. How to reduce the space between them please tell me.

---

The table element can be attributed with a border width, cellpadding and cellspacing.

So you can create a table like so (where units a numerals without lenght, means NOT 2px but 2) :

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

List of a TABLE's attributes : summary %Text; width %Length; border %Pixels; frame %TFrame; rules %TRules; cellspacing %Length; cellpadding %Length;

But with recent web design techniques, it is recommended to separate html markups from layout and design element. To achieve this, you will have to use css.

You can achieve the same like so :

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

With css, you will also have to specify if the borders are going to be collapsed or separated, witch will have effect on 'border-spacing'.

table {border-collapse: collapse;}

To avoid some legacy browswers bugs, i invite you to NOT leave an empty space before the closing </td> like : <input id="btnsearch" type="button" value="Search"/></td> (but this is to become outdated except if you develop for old-timers)

To conclude with your situation :

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;}

and you will be able to format your table the simpliest way :

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

---

在你的表格标签中添加一些属性

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

---

The cellSpacing, cellPadding and border can help you accomplish that:

   <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>

If you need them tightly close put them on the same td and perform the line break through a <br/> .

链接地址: http://www.djcxy.com/p/94726.html

上一篇: 如何删除表格中的边框间距

下一篇: 如何减少表格html中td之间的空间？