Tables Tables are very useful when you make a web page. Why? Because they are used for formatting. Let's say that you want to put three images in a row with space between them, like this: Many people would try to do this by typing many spaces (using the space bar), then putting an image; then typing more spaces, then another image; then typing more spaces, and then the last image. THIS IS A VERY BAD WAY--DON'T DO THIS!!! If you use spaces to put images or anything else into certain places in a web page, it will usually look very bad on other people's computers, so don't use spaces! Instead, we should use tables. Here's how: First, click in the place you want to put the table. then click the TABLE button: A dialog box will open. It will look like this: Here, you must choose the correct number of rows and columns. In this case, we want 2 rows and 7 columns. The width of 100% is OK. The border should be 0 pixels (to make it invisible). You will see a table that looks like this: The red lines mean that the table will be invisible on the web page when people look at it. The red lines appear now so you can design the page more easily. At first, the table cells will change size according to how much you type into them. However, usually, you want table cells to stay the same size. So you should always take this first step:
Notice the tabs at the top: TABLE and CELLS. When you choose TABLE, you can change points for the whole table at once. When you choose CELLS, you can change points for each cell. For now, please stay in CELLS. Look at the SIZE area at the middle left. You will be changing the WIDTH of the cells so they do not change size when you type into them. First, click on the PIXELS list next to WIDTH: In the little menu, choose "% OF TABLE". In the text box next to it, type "14". Why did we type 14? Because the table has SEVEN columns. 100 divided by 7 is 14%. Click "OK." Now your table cells should stay the same size (unless you put something too big inside of them). Now we have a table ready for the pictures. Click inside the second cell from the left, on the top row. Click the IMAGE button. Select an image. Change the dimensions so it is no more than 100 pixels wide. Click "OK." Now you have an image in the second cell. Click on the image. Do a COPY. Now click inside the fourth cell from the left. Do a PASTE. Then click inside the sixth cell. Do another PASTE. Now you have your three images, nicely centered and spaced! It should look something like this: When people look at your web page, they won't see the red lines. They will only see the three images, which will appear nicely spaced! Furthermore, you can use the bottom row to put text underneath the images. Each text group can be CENTERED under the image (just use the Center Align button in the toolbar). You should use tables in this way in your web pages. Remember, NEVER use a lot of spaces to do this--use tables! You can use a variety of tables, in different shapes and sizes, in order to design your web page in many different ways. Now You Know Now you know how to use the basic features of Composer. Don't forget to save your page when you're finished! With what you know now, you can now start on your web page project. The web page project is due on the LAST DAY OF REGULAR CLASSES. See the project instructions next! |