ADDING TABLES or THE HARDEST THING ABOUT WEBPAGES |
LESSON #8 |
But it's all sort of thrown on the page with no rhyme or reason. It needs organization!
HTML uses things called tables for this.
Remember earlier how I compared a webpage to a newspaper page? Well newspapers use columns like this below:
| Words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words | Words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words |
A table is nothing more than columns and rows where you can insert text and images. As the title of this lesson says creating a table is the hardest thing to do in building a webpage.
I would suggest that you just forget tables until you get used to the rest of page building.
Not going to take my advice huh?
Okay here we go...
Click on the button that looks like this in your toolbar:
That is the Insert Table button and it will bring up a box like this:
Now just click OK.
On your page you now have a table created with four places (cells) you can
add your text. It will look like this:
And you can enter text in any of the places (cells) you see. Just click inside
one of the blocks and enter your text like below:
The table will expand to allow for your text or images. There are ways to limit how far the tables can expand or contract and we'll cover that in a moment.
Okay now maybe we want out page text layout like what you see next.
| Words words words words words words words words words | |
| words words words words words words | words words words words words words words |
Okay what we do is take the table we just created above and make some changes.
Click inside the first square and get your cursor blinking inside it. Now go up to the top of AOLPRESS and click:
Table 
Merge
Cell
A box like the one below will show up:
You can see that it is set to merge 2 columns and 1 row. Go ahead and click OK. What the result is looks like the image below:
Now you have three areas (Cells) you can type text into. One area will cross the whole page and the other two will make columns below it.
The best thing you can do is take some time to experiment. With tables all layouts are possible. You can merge any number of blocks (Cells). We put some examples on the right side of this page. Make a page with a table having 10 columns wide and 10 rows up and down. Just go wild merging cells and see what all you can do.
Now if you merge a cell by mistake don't panic. All you have to do is click:
Table Split
Cell
That will return it to it's previous configuration.
Now in that last table example if you had hand coded that table it would look like this:
<TABLE BORDER CELLPADDING="2"><TR><TD
COLSPAN=2></TD></TR><TR><TD></TD><TD>
</TD></TR></TABLE>
Fortunately AOLPRESS streamlines making tables. Frontpage is not even as powerful as AOLPRESS in making tables.
Now before we go much farther I guess I should demonstrate what Border Size
is. remember after you clicked on the table button:
You got this?
See that Border Size there that is set to "1"? That controls how big the
border of each cell is. For example:
Border Size = 0 makes the border invisible.
Holy cow that is intimidating isn't it?
Remember though that borders are not necessary to build your webpage. You will want to use them eventually, but take your time and experiment around.
Okay, I'm going to leave tables right there. In the next lesson we are going to tweak the table a bit. Scary stuff next...you are going to hand code some HTML!
Don't forget to save your webpage...
File > Save As > Make sure location is right and then click the
button.
FAQ
Q) I added a table and typed in it now I can't get out of it . How do I make my cursor go on the page below the table?
Format
Exit Table Format
That's the proper way to do it. But holding down the CTRL key and hitting enter does it too.
TABLE REFERENCE
Spacing and Cellpadding are rarely used unless you are using tables to split
images (you aren't doing that trust me)
The example below has 4 columns and 3 rows:
Examples of merged cells in tables:
The gray represents the table itself yellow represents merged columns and the blue is made of merged rows.