ASK A QUESTION OR READ ANSWERS

MAKING TABLES THE RIGHT SIZE

LESSON #11a

Okay pretty much anything you put in a webpage can be affected by the:

width= statement.

WYSIWYG Editors like AOLPRESS and Frontpage tend to let tables roam wild getting as big as they want! But I am a control freak and want to tame them.

Create a blank page in AOLPRESS using:

File New New Page

Create this table on your page:

If you have to go back and review how to create a table practice it more. It only gets worse from here.

Now the HTML for the page and table you just created is displayed in our online editor to the right. Go ahead and click view in our editor and look at it.

Did you see the table like above? Yes? No?

If a table is blank some web browsers like Internet Explorer will not show them. A cell has to have something in it before modern browsers will show it.

We are going to use:
Tools Show HTML

To insert a width statement into the table.

What does width mean?

Most computer users have a 15 inch monitor others have 17 inch and so forth. Therefore the webpage you design will look big on a small monitor but quite small on bigger monitors. The two most common resolutions of monitors are:

640 X 480
AND
1024 X 768

That is a display of 640 Pixels wide by 480 Pixels up and down. Or a display of 1024 Pixels wide by 768 Pixels up and down.

So you want your tables to fall within these two ranges. I almost always set my tables to a width of 800.

Let's try that with your table. Click:

Tools Show HTML

Now look around for the line that says:

<TABLE BORDER CELLPADDING="2">
Change it to say:

<TABLE BORDER CELLPADDING="2" width="800">

Now click:

File Close Apply

NOTE THAT ALL WIDTH NUMBERS ARE ENCLOSED IN ""

How does your table look now? You can go back into:
Tools Show HTML

And tweak that 800 to whatever looks good on your computer.

Now if you want you table to fill the screens of everyone's computer no matter what size monitor they have try this. Click:
Tools Show HTML

Find the line that says:
<TABLE BORDER CELLPADDING="2" width="800">

Now change it to:

<TABLE BORDER CELLPADDING="2" width="100%">

Changing that number to 100% tells the table to fill the screen.

Use numbers like the first example when possible. Using a percentage can screw up some of your word formatting.

Now that demonstrated how to change the width of a table. Let's examine how we might change the width of individual cells.

Create the following table on your page:

That is simply a table with one row and two columns. The HTML for it looks like this:

<HTML>
<HEAD>
<TITLE>Please title this page. (Page 1)</TITLE>
</HEAD>
<BODY>
<TABLE BORDER CELLPADDING="2">
<TR>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
<P>
</BODY></HTML>

Now the first thing we want to do is set the width of the whole table like we did above. For this example let's set the tablle at 500 wide. Click:
Tools Show HTML

Find the line that says:
<TABLE BORDER CELLPADDING="2">

And change it to:

<TABLE BORDER CELLPADDING="2" width="500">

This sets the total width of the table to 500 pixels wide. Now let's play with those two columns. <TD></TD> is the column in the HTML above. The first one is the left column and the second one is the right column. If you get confused remember my tip on putting "F's" in the cells before you
Tools Show HTML.

Now we have two columns let's set the first one to 100 and the second one to 400. The total of both columns MUST equal the total width of the table. Our table is 500 wide so our columns are 100 + 400 = 500.

To set the first column to 100 we find the first:
<TD></TD>

And change it to show:
<TD width="100"></TD>

Find the second
<TD></TD>

And change it to read:
<TD width="400"></TD>

So now your HTML should look like this:
<HTML>
<HEAD>
<TITLE>Please title this page. (Page 1)</TITLE>
</HEAD>
<BODY>
<TABLE BORDER CELLPADDING="2" width="500">
<TR>
<TD width="100"></TD>
<TD width="400"></TD>
</TR>
</TABLE>
<P>
</BODY></HTML>

Now click:

File Close Apply

You should now be looking at a table like:

Is that clear as mud?

You might want to save this page and try messing with those width numbers. Practice helps make things understandable.

Don't sweat the tables too much they will come with time. Trust me there are many folks building web pages for years that don't understand tables.

Next let's learn about how to move tables around on your page. CLICK HERE

Don't forget to save your webpage...
File > Save As > Make sure location is right and then click the button.

ONLINE WEB EDITOR Copyright 2006 Maynardville.Com