简单的HTML格式问题

Question

我有一个非常简单的格式问题。我的问题是，从下面的屏幕截图中，我如何消除“Recruiter”上方和黄色突出显示的“First Name”下方的空间？

我的HTML代码是：

<table border="1" width="100%">
    <tr>
        <td width="15%">    <%--Labels--%>
            <table>
                <tr><td><asp:Label runat="server" ID="lblRecruiter" Text="Recruiter"></asp:Label></td></tr>
                <tr><td><asp:Label runat="server" ID="lblRecruiterFirstName" Text="First Name"></asp:Label></td></tr>
                <tr><td><asp:Label runat="server" ID="lblAccountManager" Text="Account Mangaer"></asp:Label></td></tr>
                <tr><td><asp:Label runat="server" ID="lblAccountManagerFirstName" Text="First Name"></asp:Label></td></tr>
                <tr><td><asp:Label runat="server" ID="lblClientCompany" Text="Client"></asp:Label></td></tr>
                <tr><td><asp:Label runat="server" ID="lblHiringManagerFirstName" Text="First Name"></asp:Label></td></tr>
            </table>
        </td>
        <td width="85%">    <%--Text Fields--%>
            <table>
                <tr><td><asp:DropDownList runat="server" ID="ddlRecruiter"></asp:DropDownList></td></tr>
                <tr><td><asp:TextBox runat="server" ID="txtRecruiterFirstName"></asp:TextBox></td></tr>
                <tr><td><asp:DropDownList runat="server" ID="ddlAccountManager"></asp:DropDownList></td></tr>
                <tr><td><asp:TextBox runat="server" ID="txtAccountManagerFirstName"></asp:TextBox></td></tr>
                <tr><td><asp:TextBox runat="server" ID="txtClientCompany"></asp:TextBox></td></tr>
                <tr><td><asp:TextBox runat="server" ID="txtHiringMangaerFirstName"></asp:TextBox></td></tr>
            </table>
        </td>
    </tr>
</table>  

Answer 1

使用inspect元素查看是否有任何内容正在扩展其高度，否则，只需将边距和填充设置为0，或者尽可能设置高度。

Answer 2

我假设您希望左侧的文字与右侧的字段对齐。您应该创建一个包含2列的表，而不是将它们设为两个单独的表。这是第一行的外观：

<table>
    <tr>
    <td width="15%"><asp:Label runat="server" ID="lblRecruiter" Text="Recruiter"></asp:Label></td>
    <td width="85%"><asp:DropDownList runat="server" ID="ddlRecruiter"></asp:DropDownList></td>
    </tr>

您所拥有的问题是每个表（左侧和右侧）根据其内容进行布局，右侧的项目高于文本行。左表的结果默认居中对齐，因此您可以获得上下差距。