html - 简单的 HTML 格式问题

Question

我有一个非常简单的格式问题。我的问题是，从下面的屏幕截图中，如何消除“招聘人员”上方和“名字”下方以黄色突出显示的空格？

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

我假设您希望左侧的文本与右侧的字段对齐。您应该制作一张包含 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>

您所遇到的问题是每个表格(左侧和右侧)都是根据其内容进行布局的，并且右侧的项目比文本行高。左表的结果默认居中对齐，因此您可以得到上方和下方的间隙。