Geeks With Blogs

Bunch's Blog One day I'll have a catchy subtitle, one day

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>

Technorati Tags: ,
Posted on Wednesday, August 12, 2009 5:32 AM | Back to top


Comments on this post: HTML Tables Side by Side

# re: HTML Tables Side by Side
Requesting Gravatar...
Actually, you can use CSS to float your tables. That lets them flow horizontally, and automatically wrap to the next line.
Left by John Nelson on Aug 12, 2009 7:02 AM

Your comment:
 (will show your gravatar)


Copyright © Bunch | Powered by: GeeksWithBlogs.net