Tables are an effective way to display both text and graphics on your webpage. In this next activity, you will add several tables to your webpage. Follow these steps.

1. Open the folder where you saved your webpage.
2. Open the yourname webpage.
3. After Netscape/Mozilla has opened on the screen, select Edit Page from the File menu.
4. Composer will open on the screen.
5. Position your cursor on a blank line on the screen.
6. Hit the Enter key several times to move the cursor down the page a bit.
7. Note: The table will be inserted at the point where your cursor is located so it is important to position the cursor on an empty line with some space above (and below) the table insertion point.
8. Click on the Table button in the toolbar (Hint: It looks like a waffle).
9. The Table dialog box will appear.
10. Change the Number of rows to 2 and Number of columns to 2.
11. Click on the Center Table Alignment radio button.
12. Click on OK and a new table will appear on the webpage.
    
    Adding Text and HyperText Links to the Table
    
    
13. Click in the top left cell of the table. Note: the boxes on a table are called "cells".
14. Type Library of Congress.
15. Press the right arrow to move to the top right cell.
16. Type The White House.
17. Click once in the lower left cell.
18. Note: you can move between cells of a table by using the arrow keys or by positioning the cursor in a new cell and clicking the left mouse button.
19. Type The National Archives.
20. In the lower right cell, type The Smithsonian Museums.
21. You will now create hypertext links for the text in your tables.
22. Select Library of Congress (hold the left mouse button down while you drag across the text).
23. Click on the Link toolbar button and enter this address:
    http://www.loc.gov
24. Click on OK to activate the link.
25. Select The White House, click on the Link button and build a link to: http://www.whitehouse.gov
26. Select The National Archives and build a link to: http://www.nara.gov
27. Select The Smithsonian Museums and build a link to:
    http://www.si.edu
28. Save the changes you made.
29. Click on the Browse button to view your webpage with Netscape/Mozilla. Test the links.
30. Close Netscape/Mozilla by clicking on the close box to return to Composer.
    
    Formatting Your Tables
    
    
31. You can apply formatting to both your table and to the text and links in the table that will make your webpage more attractive. The next steps will show you how to reformat the table and the text within each cell of the table.
32. Select the text in each cell.
33. Select a different font and font size for each cell.
34. Right-click (Mac: Command - Click) in the top left cell of the table.
35. Left-click on Table Cell Properties.
36. When the dialog box appears, click on the Cell tab to open the dialog box.
37. Click on the Background Color checkbox and click on the color chip to select a background color for the cell.
38. Click on OK and notice the changes that have taken place on your table.
39. Right-click on the top right table cell and use the drop down menus to adjust the Horizontal Alignment and Vertical Alignment.
40. Select a new Cell Background color.
41. Click on OK and note the changes.
42. Right-click on the lower left table cell.
43. When the Table Properties dialog box appears, click on the Row tab at the top of the box.
44. Click on the Use Color checkbox and select a new color for the row. This time, you will apply the changes to all the cells in the selected row instead of just to one cell.
45. Click on OK to save the changes.
46. Notice the changes that have taken place on the webpage.
    
    If you are observant, you will often see tables used by webpage designers to control the placement of text and graphics on webpages. In fact, the links you created are all to websites that make extensive use of tables in their layout scheme.
    
    
47. Revisit each linked page.
48. With the webpage visible in the Navigator window, select Edit Page from the File menu.
49. The invisible tables used on the webpages will appear.
50. Close the new Composer Window to return to Navigator.
    
    Using Tables to Position Graphics on the Webpage
    
    
51. Next you will discover how to use tables to place graphics and colored boxes on your webpage. Follow these steps.
52. Click once on a blank space below your current table.
53. Hit the Enter key several times to move the cursor down the page a bit.
54. Click on the Table toolbar button and create a new table with 3 rows and 3 columns.
55. Change the Border Line Width from 1 pixel to 0 pixels.
56. Change the Cell Spacing and Cell Padding to 5 pixels.
57. Click on OK to add the new table to the webpage. You will notice that this time the cells are shown with dotted lines instead of solid lines.
58. Click on the Save toolbar button.
59. Click on the Preview button and notice that the new table is invisible when viewed with Navigator.
60. Close Navigator to return to Composer.
61. Right-click on one of the middle table cells.
62. Left-click on Table Properties.
63. Click the Cell tab and add a Cell Background color.
64. Click OK.
65. Type some text in the cell (or press the space bar if you want to have an "empty cell" with no text).
66. Click the Save button.
67. Click the Preview button to view your changes.
68. Close Navigator to return to Composer.
69. Now, click in one of the cells on the right side of the table.
70. Click on the Image toolbar button.
71. Click on the Choose File button.
72. Navigate to the folder where earlier you saved the images you downloaded from the web and select an image.
73. Click on OK to insert the image into the table cell.
74. Click on the Save toolbar icon. Notice that Composer is automatically saving a copy of the image you selected to your floppy disk.
75. Click on the Preview icon to see what your webpage looks like.
76. Close Navigator and return to Composer.
77. Right-click on the image that you added.
78. Select Table Properties (and the Cell tab if necessary) from the menu that appears and experiment with the Horizontal and Vertical Alignment of the image.
79. Remember to save the changes you make before previewing the webpage in Navigator.

That wraps up this activity. Spend a few minutes experimenting with the tables already on your webpage. Feel free to add some more if you want to experiment further.

Website maintained by Bob Jost | bjost@josts.net | last revised July 21, 2004

Copyright © 1997-1999 by Bob Jost.  All rights reserved. No part of this website may be
transmitted, stored or recorded in any form without written permission from the author.