I have very very little experience with tables so I havnt quite gotten the hang of using them yet. I have been desiging the basic template for my website and I managed to get the sidebars and content working (1 table is the left sidebar, middle table is where the content is and right table is where another sidebar is). However I ran into a problem when I made the content table. It went in the center like its supposed to, except it is positioned beneath the left sidebar!

to see what i mean go here: http://www.evilgeniusstudios.com/template.html


Do you guys know how I would have the middle content table on the same plane as the sidebar?


also there is a small gap between the flash header and the top of the page. Wouldnt mind help on that either

Wellim not the best a html but i think this is because you have told it to.

For the content area you added another <tr> when it should be in the same<tr> as the side bar is.

I thint the header should also be in a table this way you could have used colspan which would have worked better.

Sorry if this is all wrong, as i said im not the best a html.

If i was you i would use a frontend program like dreamweaver or frontpage instead of doing the code all yourself.

nope that doesnt seem to work. My content and side bar are 2 completly seperate tables. Tried what you said and it got bumped underneath. probably because i have the table width as a specific width. There must be an easier way though.

I think the way to get what you want is to first create one table with one row and three table cells. In the first cell place your leftside bar table, in the second cell place your content table, and obviously in the third and last cell place your right sidebar table.

The one table that contains the other three tables is what will hold your layout together. When you have three separate tables your browser will always display one below the other. It gets center now because you've used the <center> tag, but it will still site below the left sidebar table.

That might be confusing with all the different mentions of table so let me illustrate with some bare bones code for the outer table.

<table>
 <tr>
   <td>
    left sidebar table code here
   </td>
   <td>
    content table code here
   </td>
   <td>
    right sidebar table code here
   </td>
 </tr>
</table>

Another thing is it's good practice to use lower case for your html instead of upper case.

I hope that helps make it clear what I mean, but if not just let me know and I can flesh out the code a little more.

Originally Posted by vangogh

I think the way to get what you want is to first create one table with one row and three table cells. In the first cell place your leftside bar table, in the second cell place your content table, and obviously in the third and last cell place your right sidebar table.

The one table that contains the other three tables is what will hold your layout together. When you have three separate tables your browser will always display one below the other. It gets center now because you've used the <center> tag, but it will still site below the left sidebar table.

That might be confusing with all the different mentions of table so let me illustrate with some bare bones code for the outer table.

<table>
 <tr>
   <td>
    left sidebar table code here
   </td>
   <td>
    content table code here
   </td>
   <td>
    right sidebar table code here
   </td>
 </tr>
</table>

Another thing is it's good practice to use lower case for your html instead of upper case.

I hope that helps make it clear what I mean, but if not just let me know and I can flesh out the code a little more.

hmm I didnt know that tables could go inside of tables. That helps alot, thanks!


I always thought that using caps was good practice... (Caps for tags and lower case for everything else). Thats the way I learned it anyhow

That's how table layouts are created, but nesting tables inside other tables. I can see where not knowing that would make it more difficult. You can technically nest as many levels as you want, but the more tables you nest inside of tables the more difficult things will be both for you to find any errors and also for the brower to display. The typical approach is to set up one outer table that controls the overall layout and then nest a table in a cell when you need to divide that cell further into more rows and columns.

The better way to actually layout a page in the opinion of many including myself is through css. You can certainly use tables, but css has many advantages over tables.

All caps used to be the standard, but as html developed and xhtml began to appear lower case is really preferred. You'll still see a lot of sites using all caps, but I'd go with lower case. I think it's actually easier to read and if you do move into using xhtml, which you should at some point you will need to use lower case so why not get into the habit from the start

xhtml isn't really anything more difficult than html. if you use lower case and always make sure to close all your tags you're most of the way to using it. html is evolving into xhtml and while html will be around for awhile I think it's better to do things based on where they're going rather than where they've been.

I see I see. Thanks again

Glad to help.

i got another problem. This one I really dont get. I dont see any problems with the code at all. What im trying to do now is add a row to the content table and in that row is a little title. here is the code

<td align="center">


<table width="430" cellspacing="0" cellpadding="0">
<th height="15" background="slices/conttop.gif"></th>
<tr>
<td height="40" width="49" bgcolor="#8f0000"></td>
<td height="40" width="16" background="slices/cont_title_1.gif"></td>
<td height="40" width="300" background="slices/cont_title_2_stretch.gif">
<B> Main </B></td>
<td height="40" width="16" background="slices/cont_title_3.gif"></td>
<td height="40" width="49" bgcolor="#8f0000"></td>
</tr>
<tr>
<td height="360" bgcolor="#8f0000"></td>
</tr>
<tr>
<td height="14" background="slices/contbottom.gif"></td>
</tr>
</table>


</td>

with that i get this:

http://www.evilgeniusstudios.com/template.html

:S

You'll need to either add 4 more <td> cells to those bottom two rows, or add colspan="5" to the current <td>.

<tr>
  <td colspan="5" height="360" bgcolor="#8f0000"></td>
</tr>
<tr>
  <td colspan="5" height="14" background="slices/contbottom.gif"></td>
</tr>

hmm.. very inefficient but it works. thanks

It's important to maintain the structure when working with tables. You need each table row to account for the same amount of table cells. If the maximum cells you have in a row is 5 then all of your rows need to account for 5 table cells through either of techwench's suggestions.

It's easy to visually see table cells of varying sizes and having 2 large cells in one row and 5 smaller cells in another. Not so easy though for a browser to interpret, however.

Adding colspan="5" to one cell is a rather efficient way of maintaining the table structure.