Composer Tutorial

     If you've been peeking at your code as you go along then you've seen how a table constructs itself. Learning table tags aren't important if you plan on using Composer to always create your web pages but it doesn't hurt to follow along with what's going on. Some day you may want to break away from Composer and try coding in a different program. Knowing the tags and how they work can be invaluable.

     In this segment we are just going to do some fun things with tables. By now you shouldn't need the screen shots. Just follow along with the directions and view the results. The first thing is tables within tables. You can get really carried away with this option but it's fun to play with. *Note - try to create your page using a new table with each section. If you start with one big table and put all your other tables inside - it will take the page longer to load.

     Okay, ready? Create a new table: Rows = 1, Columns = 2, Alignment = Center, Table width = 90%, Cell padding 25. Oopps! I almost forgot to tell you. You can add extra rows to your existing table by placing your cursor in the last cell and hitting the Tab key. Cool, huh?

     Make sure your cursor is in cell 1. Hit the Table icon to create a new table inside this cell. Here are your option settings: Rows = 3, Columns = 1, Alignment = Center, Border line width = 3, Cell spacing and Cell padding = 1, Table width 100% and here's something new - tick mark Include caption and leave it set for Above table. Now you have a caption/title box for your table. Add text to your caption and table cells.

     Now place your cursor in cell 2 of the main table. Click on the Table icon to insert a new table inside this cell. Here are your option settings: Rows = 4, Columns = 2, Alignment = Center, Border line width, Cell spacing = 0, Cell padding = 3, Table width = 100% and uncheck Equal column widths. Add graphics or text to your cells. Preview your creation. There is so much you can do with tables that it's only limited by your imagination.

     Here's another cool thing that you can do with tables. I wish Composer had made this a little easier but they didn't. It requires typing and I just hate to type. I would like for this option to be point and click like the rest of the program.

     Set up another new table using the Table icon. Here are your settings: Rows and Columns = 1, Alignment = Center, Border line width = 5, Cell spacing = 3, Cell padding = 1 and Table width = 50%. Type a title into the cell. You now have a 1 cell table with a rather boring gray border. Let's change that. Right click inside the cell and bring up the Table Properties box. On the Table tab down at the bottom there is a button that says Extra HTML.., click on it and you will see a new dialog box. You can either copy and paste this code or type it in manually, it must be exact:

     Now what you have is a table that has a colored border instead of boring gray. I love this option! You can change the color to anything you want but there must be no spaces in the code. You must have quotes around the color and you need the pound (#) sign before the color code. If you use a graphics program such as Paint Shop Pro, it's easy to get other color codes to swap for this one.

     There is another way to use tables that has become popular lately and that is to do what is called a double or triple border background. With this next section I will help you set up a triple border background using Composer. You can see what this type of page would look like by clicking here to see the test page.

     First thing to do is set up your page by adding a background image. I used tutbk1.jpg. It's entirely up to you which images you choose to use. (The images used on the test page are included on your disk). Start out with a new clean page and hit the Enter key twice to give some room at the top of the page. Next, we'll set up the first table.

     Click on the Table icon to start a new table. Here are the settings: Rows and Columns = 1, Alignment = Center, Border line width = 1, Cell spacing = 0, Cell padding = 40, Table width = 90%. Click on Choose image and select the tile image you want to use inside this table. Next click on Extra HTML and add a border color. I used bordercolor="#000080" for the first table. Say OK and you should now have a 1 cell table going partially across you page with an tiled image in it.

     Now comes the second table. Click on the Table icon to add another new table. Here are the settings: Rows and Columns = 1, Alignment = Center, Border line width = 1, Cell spacing = 0, Cell padding = 10, Table width = 100%. Click on Choose image and select the tile image you want inside this table. Next click on Extra HTML and add a border color. I used bordercolor="#C0C0FF" for this table. Say OK and you should now have a 1 cell table inside a 1 cell table.

     Inside the last table you made is where you add your text and graphics. After doing this, move your cursor outside of all the tables and hit the Enter key twice. What this does is add space to the bottom of the page so that you get a framed effect with your tables. A lot of these values can be changed to suit your tastes. Just play around with these and see what you can come up with.