Composer Tutorial
Tables - What can they do for me
Composer TutorialTables - What can they do for me |
|
|
|
Well, here's the hardest part of learning any internet page layout. Tables!
These can be a salvation or a nightmare. Fortunately, Composer makes inserting
tables fairly easy.
The first thing to do is to open a new blank page or if you've been following along, open your test.html. If you are using your test.html clear off everything we've done so far so that we have a nice clean page to start with. Click on the Table icon located on the Composition Toolbar. |
|
 |
|
 |
|
What you will see then is the New Table Properties dialog box. The screen
shot at left shows the defaults as they are set by Composer. This is where
you will lay out the number of rows, columns, alignment and width of your
table.
|
|
| Let's start with the basic options the way they are set except change the Number of columns to 1. Click OK. Preview your page, saying yes to saving the options. What you now see is a rectangle with a thin border around it that matches your background image if you're using one. An example of this is below. Follow the directions that are in each subsequent table. Type some text into each table as you make it so that you can see the results easier when you Preview your page. |
|
| This is the table you will see on your page. Although it's hard to see, you have a table with an outside border and an inside border of 1. Your text is also located a distance of 1 from the border. Even though this is a table, it is also a cell. |
| Cell 1 - Move your cursor outside and under the table. Click on the Table icon. Change Number of columns to 1 and change the Border line width to 5. Your table will look like this one. |
| Cell 1 - Move your cursor outside and under the table. Click on the Table icon. Change Number of columns to 1, change the Border line width to 5 and change the Cell padding to 8. Your table will look like this one. See how much farther the text is from the borders than in the one above this. |
| Cell 1 - Move your cursor outside and under the table. Click on the Table icon. Leave the Number of columns at 2. Change the Border line width to 5, Cell spacing to 8 and Cell padding to 3. | Cell 2 - Your table will now look like this one. You can see the most difference on the inside table border. This gives the table a framed appearance. And you can see that now we have 2 cells. |
| Cell 1 - Move your cursor outside and under the table. Click on the Table icon. | Cell 2 - Change Number of Rows to 2 and leave Number of columns at 2. |
| Cell 3 - Change Border line width to 2, Cell spacing to 6 and Cell padding to 0. | Cell 4 - This is how your table should look. The text is right up next to the border because of Cell padding = 0. |
| Move your cursor outside and under the table. Click on the Table icon. Change Number of rows to 2 and change Number of columns to 1. Change Border line width, cell spacing and cell padding to 3. |
| This is what your table will look like. As you can see, you can lay out a table almost any way you can imagine. Just by changing the values in each option, you can give your table a variety of looks. |
|
Well, now that we know how to make tables from scratch, what about editing
an existing one? This can get just a little tricky but we will cover that.
Use the last table you made from the examples above. Make sure your cursor is inside the table. Right click your mouse inside the table to bring up the Table Properties dialog box. Do not click on the Table icon to edit a table, this will only insert new tables, not edit existing ones. Here you see 3 tabs at the top of the box. Make sure you are on the Table tab. On this tab you can change any of the table options that you set previously. *Note - you can be in any cell of a multi-cell table to change table properties, but you must be inside the specific column or row when you want to change individual values. This will become clearer as we go along. Follow along with instructions in each table below. Remember, start with the last table you made if you want to see the same results as mine. Keep working with the same table throughout the next exercise. |
|
 |
|
| Cell 1 - Place cursor in this cell then right click to bring up the Table Properties dialog box. On the Table tab, change the Table alignment by choosing the Center option. Then change Table width to 50%. |
| Cell 2 - This is what your table will look like. You have told the entire table to "shrink" to 50% of the window and to center itself inside that window. Once you've viewed the table by using the Preview button, place your cursor back in cell 1. |
| Cell 1 - Start in cell 1 and with the same right click procedure choose Insert - Table - Column. | Cell 2 - This is now cell 2. You don't need me to tell you that what we did was add a column. |
| Cell 3 - This text is here so that the cell won't collapse. | Cell 4 - As you can see, you need something in your cell so that it won't collapse on itself. |
| Cell 1 - Start in cell 1 and with the same right click procedure choose Insert - Table - Row | |
| Cell 3 - This is the newly inserted row. Notice that cell 2 appears to have nothing in it. It actually has a space in it! | Cell 4 - Notice that when putting in rows and columns that Composer matches up the cells needed. |
| Cell 5 - So that when adding a row to this table, Composer knew that it needed 2 cells for the inserted row. | Cell 6 - So now you get an idea of how easy it can be to create tables with Composer. |
|
| In this tutorial we started with the basic functions of table making. We learned how to create tables from scratch and how to create different looks by changing the options. We also learned how to edit existing tables and we also learned that you can hold a cell open by inserting a space. The next tutorial covers more on tables as it is a rather large subject. |
|
| Move on to: Tables 102 |
|
| Go back one page |
|