Composer Tutorial
Tables 102
Composer TutorialTables 102 |
|
|
|
In the last tutorial we learned some very basic table formats. This tutorial
is mostly a continuation of that tutorial. There is so much to learn about
tables that I had to break it up into segments.
For this tutorial, start with a clean blank page or open your test.html. Clear it off so that it is blank. The tables we will learn in this segment aren't really any different than the last ones. The differences will be in how we present them. A quick way to clear your test page so you can start fresh is to click on the word Edit on the Menu Toolbar then Select All then hit the Cut icon on the Composition Toolbar.
Start by making a table on your clean page. Click on the Table icon. Choose
Number of rows (2), Number of Follow the directions in each cell to make your table look like mine. Remember to put text in each of the cells. If you don't, then when you preview your page, the tables will be collapsed and you won't be able to see the correct results. |
|
 |
|
| Cell 1 - Start here. Right click inside this cell. Choose Table Properties. On the Table tab go down to the Table Background portion. Click on the gray box next to Use Color. This will bring up the color box. Click on the light purple square at the far right. | Cell 2 - This changed all the cells inside the table to light purple. Click inside cell 2. Follow the same procedure to bring up the Table Properties box. This time click on the Cell tab. In the Cell Background portion click on the gray box next to Use Color. Click on the light blue square to change just this cell color. |
| Cell 3 - Use the same procedure as above but this time click on the Row tab. As you can see there is also a Row Background option to change the color. Pick the light yellow color square. | Cell 4 - Now what you should have is 1 purple cell, 1 blue cell and 2 yellow ones. One thing I've always wondered is why there was never a Column Background color option. One of those Composer mysteries, I guess. |
|
|
So now you see how easy it is to add color to your cells. There are two
things to note about using cell colors. The first is to follow the same
rules we learned in the first tutorials. Don't use retina burning colors.
You don't want your visitors madly blinking their eyes and rapidly moving
off your site. The second thing is that individual cell colors over-write
the table color.
Sometime you may want a table that's a little different. Say you want a 2 column table but on the left side you want a nice big space to put a picture while on the right you still want your individual rows. This is not impossible in Composer but it is a little tricky. This is one of those "flaws" that I wish they'd fix. To my way of thinking when I tell a cell to span - it should just span! Clear your page. Make a table with 2 columns and 3 rows. Make the Table width about 50%. Uncheck the option of Equal column widths, change the Table Alignment to Center and leave the rest of the defaults. You will also need a small image to use in the left cell. Use your own or use the transparent book image that I provide here.  |
|
| 1 | 2 |
| 3 | 4 |
| 5 | 6 |
|
| As you can see, it's a table just like the others we've created. Right click inside cell 1 and bring up the Table Properties box. On the Cell tab you will see an option called Cell spans. Change the row(s) to 3 and leave the column(s) at 1. You can see the result below. It's close to what I want but a little screwy, don't you think? |
|
| 1 | 2 |
| 3 | 4 |
| 5 | 6 |
|
|
Now I have my large cell where I can place a picture and my 3 cells to
the side where I can put text or links, but what about those 2 little dudes
hanging off to the side? Let's get rid of them. Place your cursor inside
the offending number 4 cell. Right click to bring up the menu then do a
Delete - Cell. Do the same thing for the offending number 6 cell. Now we
can place our graphic inside the larger cell and text inside the smaller
cells to the right. Below is the finished table. I have added some unimportant
"blurbs" to the table cells to show you how you might use this type of
table.
Also below is the exact same table with a different look. Bring up the Table Properties box. On the Table tab, change the Border line width to 0. It's the exact same table but without the border. Pretty cool, huh? |
|
|
Second Sight |
| These Netscape Composer tutorials were written by Val. I have put a lot of thought into these tutorials and hope that they are of help to someone. | |
|
Second Sight |
| These Netscape Composer tutorials were written by Val. I have put a lot of thought into these tutorials and hope that they are of help to someone. | |
|
| We can accomplish the same type of table with different results. Clear your page. Make a table with 2 columns and 3 rows. Make the Table width about 50%. Leave the Equal column widths checked and change the Table Alignment to Center. Once again you will have a table that looks like the one below. By now you know what the numbers are for. |
|
| 1 | 2 |
| 3 | 4 |
| 5 | 6 |
|
| Place your cursor in cell 1. Bring up the Table Properties box. Go to the Cell tab. For Cell span options, leave row(s) at 1 and change column(s) to 2. Next, place your cursor in cell 5 and repeat the above steps. Now we have another whacky table as indicated below. That's okay though because I wouldn't have brought you here if we couldn't fix it. |
|
| 1 | 2 | |
| 3 | 4 | |
| 5 | 6 | |
|
|
Place your cursor in that misbehaving cell 2. Right click then go to Delete
- Cell. Do the same thing for cell 6. Then I deleted the numbers out of
the cells, added some text and graphics and played with the Alignment option
on the Formatting Toolbar. I also didn't like how close the objects were
to the border so I gave the table some extra Cell padding. Below is the
table with the added blurbs.
And once again, I duplicated the table and took away the borders so that you could see what a difference this option makes. |
|
|
|
|
 |
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
| In this segment of the table tutorial we learned how to add color to the table cells as well as changing the color in individual cells. We learned how to do a split table, a couple of minor Composer quirks that we now know how to fix. Once again, there is not one perfect way to do HTML except code it by hand and with tables that can get extremely tedious. |
|
| Move on to: Tables 110 |
|
| Go back to: Introduction Page |
|