Navigation and aligning tables.

How do you align a table to the right of a navigation menu? Please help:)

[frenzy77]

Hi everyone:)

Need some help aligning some information on a webpage.

I have navigation at the top left of the webpage.

Ex.

>Home
>Product >abc here< >xyz here<
>Order
>Info
>Faq
>Etc.
>Etc.
>Etc.

And i want to create 2 separate tables with some text and align them both to the right of the navigation menu as it is shown above.

I am having trouble aligning the text to the right of the menu.

I have:

<table width=100% border=0 cellpadding=0 cellspacing=0>
<td valign=top>
<tr>
<td>

blah blah
etc., etc.
</td>
</table>

*I've been trying to figure out what i'm doing wrong but have'nt been able to get it right. I am somewhat new to html so I have'nt used tables too much.

Q.1. What am i doing wrong?
Q.2. Can someone show me how to do this using the above example?

Q.3. I have seen people *not* use quotations in the source code. For example:

<table width=100% border=0>

Q. Do you need to *include* the quotations?
Ex. <table width="100%" border="0">

I think i've seen some use the quotes in their coding.

[edited by: Brett_Tabke at 1:55 pm (utc) on April 30, 2005]
[edit reason] no extended signature files please. [/edit]

[MamaDawg]

Lots of ways to do this - if you're using a table for your entire page layout then something like this would work:

<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td> navigation goes here </td>
<td> 1st col of text goes here </td>
<td> 2nd col of text goes here </td>
</tr>
</table>

This will give you 3 cells side-by-side with the navigation on the far left. Set your td widths to appropriate values. And the td's need to go inside each <tr></tr> (your example has them mixed up)

Or you could do this with divs instead of tables, but that's another subject...

Q. Do you need to *include* the quotations?
Ex. <table width="100%" border="0">

You should.

Hope this helps!

[mt_biker]

In addition to MamDawg's technique you could use one large, page wide table and nest the other tables within the cells of the larger table...

<table width="100%" border="1">
<tr>

<td>
<table>
<tr><td>Menu Item 1</td></tr>
<tr><td>Menu Item 2</td></tr>
<tr><td>Menu Item 3</td></tr>
</table>
</td>

<td>
<table>
<tr><td>
Text Column 1
</td></tr>
</table>
</td>

<td>
<table>
<tr><td>
Text Column 2
</td></tr>
</table>
</td>

</tr>
</table>

Notice the large table has only one row. Also, the nested tables reside within the <td></td> tags (the cells) of the larger table.

The nice thing about this method is that you can assign differnet values for cellspacing and, what I often find especially helpful, cellpadding (as well as all other table variables) for each table.

[edited by: mt_biker at 5:45 pm (utc) on April 27, 2005]

[mt_biker]

Just noticed this from your example...

<table width=100% border=0 cellpadding=0 cellspacing=0>
<td valign=top>
<tr>
<td>

blah blah
etc., etc.
</td>
</table>

...the first <td> tag in preceeding the <tr> tag. <tr> needs to come first. Like this...

<table width=100% border=0 cellpadding=0 cellspacing=0>
<tr>
<td valign=top>

blah blah
etc., etc.
</td>
</tr>
</table>