Keeping the text and graphics out of your side border background.
Okay, It's time to put all this tables stuff to work. Everybody has seen a web page with a neato border running down the left side of the page, right? And you've wondered "how's they do that"?
Well, mostly it's done with tables. There are several ways to accomplish this using tables, and is possible using CSS as well, though that's not supported as well at the moment.
I prefer to use a table that's aligned to the left, with a transparent spacer .gif to provide the spacing to clear the border. As I said, this isn't the only way to do this with tables, but I've fould it to be the most reliable method.
So, let's get started. First, we need to decide where on the page any logo graphic will be placed. You can center it on the page, independent of the table, or you can include it as past of the table. Depends on how you want the page to look.
We'll do it both ways so you can see the difference. First, a logo centered on the page, outside of the table.
 |
Okay, we've simulated a left border web page background, in this case it's a wood border with a white field. The graphic is above the table and is centered on the page. In reality, the wood would extend farther up, but we're simulating so it doesn't do that here. The graphic will move from side-to-side in relation to the table as the browser window width is changed. If you change your browser window width you'll see what I mean. The code for this table would look like this: |
<table border="0">
<tr>
<td><img src="../graphics/clear153.gif" width=153 height=3 border=0 alt="spacer"></td>
<td>all your text here</td>
</tr>
</table>
|
Okay, same table, only this time we've placed the logo in the right table cell. This time, graphic will keep its relation to the table text (centered) as the browser window width is changed. Try it again to see the difference. The table code looks the same for this one. The only difference is where the logo graphic code is placed. |