Bunch's Blog

Here is a long time issue and this is by no way the first post about it (or probably even the 1000th). In the code below I have two tables that needed to be side by side. The first one on the left allows a user to search for site notes. Just a few dates and a note type. The second table allows a user to enter a new note. Even less to enter just a date and the text for the note. Since I needed the tables side by side I nested both into one big table, keeping each table in it’s own cell and both cells on the same row of the big table. That worked fine but the search table on the left was centered vertically and the add note table started at the top like I expected. But it did not look quite right. To get both tables to start on the same line at the top I added valign=”top” to the cell of the left search table. That forces the table to the top.

<table>
    <tr>
        <td valign="top" >
            <table >
                <tr>
                    <td>
                        <asp:Label ID="Label1" runat="server" Text="Search Notes" CssClass="tableLabel"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:TextBox ID="txtNoteStartDate" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:TextBox ID="txtNoteEndDate" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:DropDownList ID="ddlNoteType" runat="server" DataSourceID="odsNoteTypes" DataTextField="ItemName" DataValueField="AppValue" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Button ID="btnNoteSearch" runat="server" Text="Search" />
                    </td>
                </tr>
            </table>
        </td>
        <td>
            <table  >
                <tr>
                    <td>
                        <asp:Label ID="Label2" runat="server" Text="Add Note" CssClass="tableLabel"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:TextBox ID="txtNoteDate" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td >
                        <asp:TextBox ID="txtNote" runat="server" Width="500px" TextMode="MultiLine" Rows="7" />
                    </td>
                </tr>
                <tr  >
                    <td >
                        <asp:Button ID="btnAddNote" runat="server" text="Add Note" />
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                </tr>
            </table>
        </td>
    </tr>
</table>