Tables are very useful in web pages. They can be used to precisely arrange text and graphics on a web page. Look at the examples below.

Table examples

http://html.about.com/compute/html/library/weekly/aa122797.htm - some reasons to use tables

http://24hourhtmlcafe.com/hour15/fearful2.htm - basic table

http://24hourhtmlcafe.com/hour15/fearful3.htm - still a basic table

http://browserwatch.internet.com - created using tables

http://24hourhtmlcafe.com/look/look.htm - graphics and tables

http://24hourhtmlcafe.com/hour15/tabula.htm - tables within tables

http://www.lucifer.com/~sasha/thinkers.html - more tables

http://www.cyberbits.com/Tables/tablmain.htm - click on columns and rows

1. Open Front Page and start a new blank document.
2. At the top of the page type in Calendar of Events. Press the enter key a few times.
3. Change the title of the page to read Schedule of Events and change the background color.
4. Click on the Table Menu. Point to Insert and click on Table. A menu will appear. The width will set how wide the table, set it to 80 percent.
5. Choose 5 columns and 4 rows.
6. Leave everything else alone for now.
7. Click on the OK button. The table should now appear.
8. Save this calendar page to your disk. Name the file Calendar.htm (remember the program automatically puts the .htm at the end of the file name, you only need to type Calendar).

1. Click in the first cell. Type in Monday. Press the Tab key (the cursor should jump to the next column, same row). Type Tuesday. Press the Tab key and type Wednesday. Add Thursday and Friday to the last two columns.
2. Right-click in the cell where you typed Thursday. Choose Cell Properties from the menu. Change the border and background colors. You can also change the alignment (center, left, right) from this window.
3. To add more rows, click in the last cell in the last column. Press the tab key. A new row should start.
4. To add column click in a cell to the right or left of where the new column is to be placed. Click on Table in the Menu Bar and point to Insert. Choose Rows or Columns. Choose where to put the column in relation to where the text cursor is located. Click on OK.
5. Right-click anywhere in the table. Choose Table Properties from the menu. Change the width from 80 to 100. Click the OK button. Using 100% width will insure the table adjusts to any size screen. You may want to set the table to 90% to allow for the "white space" margin discussed earlier in this course.
6. Right-click anywhere in the table. Choose Table Properties from the menu. Change the cell padding and cell spacing to 10. Click on OK and examine your table.
7. You can also change the border. Use 0 to make the gridlines disappear. By default, if a cell is empty, the cell border will not be drawn. To force a cell to display, click in the cell and press the space bar.

1. Use Ctrl + End to place the text cursor at the bottom of your Calendar page.
2. Click on the Table Menu. Point to Insert and click on Table. A menu will appear. The width will set how wide the table, set it to 60%.
3. Choose 4 columns and 2 rows.
4. Leave everything else alone for now.
5. Click on the OK button. The table should now appear.
6. Click in the first cell. Click on the Picture button found on the Standard toolbar. Insert a picture from the Icon folder found on the Desktop (pictures downloaded from http://www.iconbazaar.com )
7. Move the text cursor to the first cell of the second row. Type the word Home.
8. Click once on the picture to select it. Click on the hyperlink button. Click on the File Browse button and navigate to the disk with your index page on it. Click on your Index file and click the OK button. Click OK.
9. Place the text cursor in the second cell of the first row and insert another picture. Type in the word Calendar.
10. Link this picture to the Calendar page.
11. Insert a third button and link it to one of your other web pages.
12. Select the entire table and choose Center from the Format Toolbar.
13. Test your links in the browser.
14. You can select the entire table and copy it to your other pages.

FrontPage has some neat effects you can add to your web page.

1. Make sure the Calendar page is open and select the Heading.
2. Open the Format Menu and choose Dynamic HTML Effects (if you do not see the option, point to the double arrows pointing down at the bottom of the menu and wait a moment for the menu to expand).
3. Click the drop down menu for the On box and choose Page Load.
4. Click the drop down menu for the Apply box and choose Spiral.
5. Highlight the text for the Home link in your navigation bar at the bottom of the page.
6. Open the Format Menu and choose Dynamic HTML Effects (if you do not see the option, point to the double arrows pointing down at the bottom of the menu and wait a moment for the menu to expand).
7. Click the drop down menu for the On box and choose Mouse Over.
8. Click the drop down menu for the Apply box and choose Formatting.
9. Click the drop down menu for the Choose Settings box and choose Border.
10. Select a border from the window that opens. Click the OK button when done.
11. Now select the picture (click on the picture you selected for the home link).
12. Open the Format Menu and choose Dynamic HTML Effects (if you do not see the option, point to the double arrows pointing down at the bottom of the menu and wait a moment for the menu to expand).
13. Click the drop down menu for the On box and choose Mouse Over.
14. Click the drop down menu for the Apply box and choose Swap Picture.
15. Click the drop down menu for the Choose Picture box and select Choose Picture.
16. Navigate to the same icon folder on the Desktop and select a different picture. Click OK.
17. Save the file and preview in the browser.

1. List at least three sites you visited to find graphics or other information to create your web page.

 

 

 

2. Of the pages listed above, which did you find easy to use and which did you find difficult to use? Why were they easy or difficult to use?

 

 

 

3. List your favorite graphic site and why you would recommend other teachers use it?

 

 

 

4. List at least three elements of a web page or web page design that "turn you off" (what don't you like to see when viewing/using a web page.

 

 

 

 

 

5. List at least two elements that you think ALL web pages should have and why they should have them.

Last modified 6/6/01