HTML Help: Formating with Tables

[Zypher]

What I need to know is how I can use tables to insert a navigation bar all the way down the left side of the page. Basically, I'm looking for a way to use tables as a substitute for frames. Here's what I have:

Navigation Bar|textxxxxxxxxxxxxxxxxx
Link 1_______|xxxxxxxxxxxxxxxxxxxxx
Link 2_______|xxxxxxxxxxxxxxxxxxxxx
Link 3_______|xxxxxxxxxxxxxxxxxxxxx
Link 4_______|xxxxxxxxxxxxxxxxxxxxx
____________|xxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

What I want:

Navigation Bar|textxxxxxxxxxxxxxxxxx
Link 1_______|xxxxxxxxxxxxxxxxxxxxx
Link 2_______|xxxxxxxxxxxxxxxxxxxxx
Link 3_______|xxxxxxxxxxxxxxxxxxxxx
Link 4_______|xxxxxxxxxxxxxxxxxxxxx
____________|xxxxxxxxxxxxxxxxxxxxx
____________|xxxxxxxxxxxxxxxxxxxxx

And so on with the entire page split into two sections. (The underscores are blank spaces)

[Citizen Bleys]

TD ROWSPAN=2

I'm not quite clear on the question, so I'm assuming you have something like this:

<table border=1>
<tr>
<td>nav bar here</td>
<td>news page here</td>
</tr>

<tr>
<td>stuff you want over there -></td>
<td>Blank space you don't want</td>
</tr>
</table>

and what you want is this:

<table border=1>
<tr>
<td rowspan=2>nav bar here</td>
<td>news page here</td>
</tr>

<tr>
<td>yay</td>
</tr>
</table>


In which case, you can quote my post to see the exact code.

(btw, the reason for the big blank space above each table is that vBulletin doesn't ignore whitespace, so since I've used clear spacing and indenting on my table instead of trying to cram it all onto one line, vBulletin pops a bunch of whitespace above it.)

[Zypher]

Naw, that's not what I wanted, but thanks. I guess I wasn't very clear....

Alright, the table is aligned on the left side and the text appears to the right of the table. Once there is enough text to go past the bottom of the table, the text starts again at the left margin. I want it to continue starting at the right edge of the table, if that edge was extended all the way down. I can't see any way to do it other than adding a bunch of empty rows/cells, so I might just end up using frames anyway....

I hope that was clearer.

[Citizen Bleys]

I must be missing something--it seems to me that all you need is a simple one-row table, and if you know how to create an html table at all, that should be simple to you

(table border=1)
(tr)
(td)Nav bar(/td)
(td)page body(/td)
(/tr)
(/table)

like this:

<table border=1><tr><td>My Short Nav Bar</td>
<td>I am the very model of a modern major-general<br>I've information vegetable, animal and mineral<br>I know the Kings of England and I quote the fights historical<br>From Marathon to Waterloo in order categorical<br>I'm very well aquainted, too, with matters mathematical....</td></tr></table>

And if you want your nav bar to start at the top of the left-hand "frame", you use TD VALIGN="TOP" for the left-hand table cell:

<table border=1><tr><td valign="top">My Short Nav Bar</td>
<td>I am the very model of a modern major-general<br>I've information vegetable, animal and mineral<br>I know the Kings of England and I quote the fights historical<br>From Marathon to Waterloo in order categorical<br>I'm very well aquainted, too, with matters mathematical....</td></tr></table>

[The Man]

<FONT COLOR=38E897>Well, hm.

If you want the text to flow under your column after the column's information is through, then use &lt;table align=left&gt;.

<table align=left cellspacing=0 cellborder=0><tr><td><FONT COLOR=38E897 SIZE=5>F</FONT></td></tr></table>or example, you can create a drop cap effect quite easily by using &lt;table align=left cellspacing=0 cellborder=0&gt; &lt;tr&gt; &lt;td&gt; &lt;FONT SIZE=5&gt; &lt;B&gt; [drop cap goes here] &lt;/B&gt; &lt;/FONT&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; and then typing your text, as I just did. It's a somewhat strange way to do things, and I don't know exactly why it works, but it works regardless. I don't think that's what you wanted though.

If you want a column, which is what it sounds like you want, then go with Bleys' one-row table. That ought to work. I have no idea why it shouldn't work, actually, as long as you make sure you only close the table at the end of all the text you want to remain in your nifty column-based layout. For an example of how that can be made to work, view my web page (which is best viewed in 1024x768 resolution or higher).

Peace
The Man<FONT COLOR=38E897>

[crono_logical]

If you want the column, do what The Man did to make the drop cap, but replace that B with the whole links table (yes, put a table inside a table ).

[Garland]

My website is formatted in the manner you seem to want, and I did my table as Bleys did. What you might want to do is add defined sizes to the tables. That just entails finding the TD tag for the left hand column, and adding width="20%,*" after the td, and before the >

Then find the TD for the right hand column, and do the same with 80. Of course you can use any two numbers that add up to 100, but 20/80 mimics most frames accurately. Just don't forget the ,*
It's important lol.

example: (td width="20%,*")
Stuff here
(/td)

[The Man]

<FONT COLOR=38E897>If you replace all your spaces with non-breaking spaces (use the &amp;nbsp; HTML function), you can format it even better, so that everything you want to be on one line will fit on one line. I'd recommend that you lay out your links table with a word processor, set in the typeface you want to use, to make sure that you like the way the lines align with each other.

My <FONT COLOR="#00FFE8" :bou::bou::bou::bou::bou::bou::bou:Over="this.color='#BFFFFA';" :bou::bou::bou::bou::bou::bou::bou:Out="this.color='#00FFE8';" :bou::bou::bou::bou::bou::bou::bou:Down="this.color='#BFFFFA';" :bou::bou::bou::bou::bou::bou::bou:Up="this.color='#00FFE8';">current Holy Sword Legend 3 page</FONT>, which is very graphics-intensive and may take a long time to load, has an example of this technique; every space in the column is a non-breaking space, and the column is only slightly wider than the longest line of text. If you use &lt;TD WIDTH=0&gt; for such a column, then assuming every line is formatted with non-breaking spaces, it will be exactly as long as it has to be and no longer. In other words, every time there's a breakable space or a line break, a new line will start; words connected by non-breaking spaces, however, will stretch the length of the line if necessary.

Dunno if that'll help any, but it might make things look somewhat tidier. It's not particularly fun to change all your spaces into ASCII codes though, and it certainly doesn't look particularly pretty in the source view.

Peace
The Man<FONT COLOR=38E897>

[Zypher]

*slaps forehead* I can't believe I didn't see that...obviously, I should be using two columns rather than just the one aligned on the left. I was thinking of putting some kind of spacer .gif to extend the table, but of course just creating two columns will work better.

The Man: Thanks, that's a good idea. I may do that, but I think I'm more likely to just go the easy way and let it be a little less 'pretty.' I'm too lazy, and it seems complicated.... *is an ass*