Borders

	Let's start with the box that expands with the text.

	If we take the table we made at the end of Part One of this tutorial, and remove all sizes, both for the table itself and for all the cells (set everything to Auto), then when we type into the center cell of the table it automatically expands to whatever width is needed to hold the text. It keeps expanding sideways until we hit something else, then it starts expanding downwards.

	If we set the width of the table to a specific size, in pixels, and the content inside the center cell is large enough to be wider than that size, then it pushes the center cell larger until it hits the inside edges of the table and then it starts to expand downward. If the content inside the table isn't large enough to make the center cell hit the edges of the table, then the table falls apart.

	Like this.

Why did that happen? Remember in part one, before we set sizes for each cell? The same thing is happening here. So we add a width to the cells. Since we are going for a fixed width table, we can set all the widths in pixels.

	Like this.

	What if we want the width to not be fixed in pixels, but to change based on the size of the browser window. Lets set the table to 50% width instead of a fixed pixel width. Since the outer cells should stay a fixed width, to hold the border, we will leave them set in pixel widths. But the center cell must change size as the browser changes, so we set it back to auto. Now try changing the size of your browser window and watch the table change. This works well when the content of the table is large enough to always push the center cell outwards. But once again if there isn't enough content in the center cell, the table breaks.

This works well when the content of the table is large enough to always push the center cell outwards. But if there isn't enough content in the center cell, the table breaks in Netscape 4. IE and NN6 are willing to take your word that the cells on the sides should be that fixed pixel width, and expand the center column to fill the space. But NN4 figures you made a mistake and tries to distribute the space. We can fix this so it works in all the browsers. It's pretty simple. We just specify a width for the center column.

But since the tables grows with the page, we can't set that width in pixels. We have to set it in percent. When we set the width of a table in percent, the percentage we specify is the percentage of the space the table is in. In this case the width of the page. But when we specify a percentage width for a cell we are talking about a percentage of the table. Since the table can be any size, large or small, but the corner images stay the same size, then the center column is actually changing what percentage of the table it contains every time the browser changes size.

So we pick a percentage that is higher than the cell will probably ever be. We set the center column to 98% width. It shouldn't be 100% since there are other columns and the center column can never be 100% of the table width. But at 98% the browsers will just trim that number down to the size actually needed. We are basically saying "make it as wide as you can". Now no matter how wide the page gets, the table will always be 50% of it's width, and the border around the table looks the same in all major browsers.

OK, now what about setting the height to a percentage? Lets say we want the table to expand to fill 50% of the height of the window.

	This table has been set for 50% width and 50% height, and the center column is set to 98% of the table width, and the middle row is set to 98% of the table height. So what's wrong?

Remember when I said That a table's size in percentage is based on what it is in? Well, this page is inside of another table. That table is set to 100% width and auto height. So it only grows taller to fit the content. The browsers don't see any extra room vertically, since when we set our table in percentages it refers to the percentage of what it's in. With the outer table set to auto height there's no room for our table to expand. But if we get rid of the outer table holding this page, and place our table on a blank page......

Go to the next page.