Prev
|
|
|
| Prev |
Next |
| In
the previous lesson, you learned the concepts and skills needed to set
page properties and to use an image as the background for your page.
In this lesson, you will be learning a very important tool in Composer
-- the tables. Tables are very helpful to organize various components
of the document and create an aesthetic page layout. You will also learn
how to modify cell properties. Here I just give you an overview of the
uses of tables and how to edit them. You will get some hands-on experience
on modifying table and cell properties in Lesson 8.
Concepts Tables
are powerful tools for presenting complicated information in a simple
way. Creative use of tables conveys information effectively and enhances
the aesthetic look of the screen layout. Below are four common uses
of tables. Of course, professional Web designers go far behind these
examples. Click the following to go to the examples. When you are done,
remember to come back.
Tables can be complex. If you don't understand something, don't panic.
Once you have more hands-on experience in using tables, you will eventually
master the skills.
Table Properties To
insert a new table, click on the
The following information is about each component of this Image Properties window. You may need to scroll up and down to match the diagram (above) and explanations (below) so that you will know what I am referring to. 1. Number of rows and columns The row and column of a table are illustrated by the following diagram.2. Table alignment You can align the table to the left, center, or right of the window.3. Include caption A table can have a caption above or below it.4. Border line width Set the width for the size, in pixels, of the border lines around cells. A table with a border of 0 pixel is invisible on the browser window, but is displayed by dotted lines on the Composer window (This is a very common technique many Web designers use to create their special screen layout). Click on the button below to see the illustration.5. Cell spacing Enter a number for the space, in pixels, between cells. Click on the button below to see the illustration.6. Cell padding This sets the margins (space) of each cell. Enter a number for the padding, in pixels, within each cell. Click on the button below to see the illustration.7. Table width Table width and height are illustrated by the following diagram.8. Table minimum height This is the smallest height the table can have. If you add text to the table, the table automatically resizes to accommodate the text. Choose "% of window" or "pixels." If you specify height as "% of window," as with table width, the table height changes whenever the window height changes.9. Equal column widths Makes all cells the same width. Deselect this if you want to size each cell individually.10 Table background You can choose a background color or image for the table. For example,Once everything is set, click OK to close the properties window and go back to the composer window. Note:
Cell Properties Sometimes, you may need to change the design of the table after it is created. You will learn the techniques for editing tables, including setting row and cell properties, adjudging column width, etc. Caution: Some of the techniques may seem tricky. To set the cell properties, first place the cursor in the cell. Then right-click on the blinking cursor and choose Table Properties (or choose Format > Table Properties). You will see the following window.
The following information is about each component of the above Image Properties window. You may need to scroll up and down to match the diagram (above) and explanations (below) so that you will know what I am referring to. 1. Horizontal Alignment / Vertical Alignment This aligns the text, image, or other objects within the cell. Default (usually left and center) leaves the alignment as it was when the table was created.2. Cell spans A cell can span more than one column or row. In other words, you can merge several cells into a single one. For example,3. Text style Header style: If you check Header style, the text in the cell will be aligned to center and set to bold style. For example, the first cell in the following table is set to header.4. Cell width Enter a number for the width of the cell. Choose "% of table" or "pixels." If you specify "% of table," the cell width changes with table width.5. Cell min. height Enter a number for the minimum height of the cell. This is the smallest height the cell can have.6. Use Color You can color the cell. For example,7. Use Image You can use an image as the cell background. For example,8. Leave image at the original location The default is unchecked. It means that when you save your file, Composer makes a copy of the image and places it in the same directory (folder) as your file. However, if you check this option, Composer does not copy the image to the same directory (folder) as your file. Accessing the image requires additional steps which we do not need to get into here. Therefore, for the purpose of this tutorial, do not check this option.Adding and Deleting I. To add an additional row to a table:
|
||||||||||||||||||||||||||||||||||||||
button or choose Insert > Table > Table... You will see the New
Table Properties window like this.
