Well, remember back in the tables tutorials? Yes, back when we were wondering what would be a nice solution to the table cell length problem. Here is what the problem was: We had a table like the one below, but we wanted to have the table cells be the same length, rather than the two different sizes.

I want two columns the same size.

Well, I dont.

As you may recall, we looked at using a 1x1 gif image trick to force the table cells to be even. Unfortunately, this caused some problems. We were left with a table that had extra space below it because of the 1x1 image. Also, if a surfer viewed the page with their images turned off, it would either mess up the effect or make things look bad.

So, how can we work without the image, and without any other visible tricks, and still force the table cells to be even? Well, you may also remember the nested tables tutorial, where we saw how to put one or more tables inside one large table. Now think about that trick, and what would happen if we added width attributes in the two smaller tables......we could make the larger table have two cells with any width we wanted, including exactly the same width! How about an example, you say?

First, let's start by creating a large table. We will give it a width of 500 pixels. Let's also be sure to set the cellspacing and cellpadding to zero. This will be our outside table with a two pixel border.

<TABLE width="500" border="2" cellspacing="0" cellpadding="0">
<TD align="left">

</TD>
</TABLE>

Now, we need to make the two inside tables, which will contain our text. This time, we are going to add width attributes to the inside TABLE tags. We will set both inside tables to be 250 pixels long, so they will be the same size. Also, set the borders on the inside tables to zero, or you will get more borders than you bargained for!

<TABLE width="500" border="2" cellspacing="0" cellpadding="0">
<TD align="left">

<--------start your first inside table here-->
<TABLE width="250" border="0">
<TD align="left">
I want two columns the same size.
</TD>
</TABLE>
<-------end of your first inside table-->

</TD> <-----this ends your first table cell in the outside table--->

<TD align="left"> <-------start your second table cell in the outside table-->

<--------start your second inside table here-->
<TABLE width="250" border="0">
<TD align="left">
Well, I do now!
</TD>
</TABLE>
<-------end of your second inside table-->

</TD> <-----this ends your second table cell in the outside table--->
</TABLE>

So, what does all of this code get us? Exactly what we wanted the entire time. Two even table cells with our text in them:

How about that? Not only will this trick work for the simple table above, but it can be used to maintain a consistent layout for an entire page! You can set all your borders to zero, or decide which tables you would like borders to be visible on. You can set exact table cell widths this way, so you won't have to worry about changing the wording of your text many times or using an extra image. Give it a try, it can work wonders for the look of your page, and allow you to be more creative with your overall design. Have fun!