Using Tables for Advanced Web Page Layout

This module shows you how to use tables to arrange information into rows and columns on the screen. Once you learn how to do this, you can create any conceivable arrangement of text and graphics onscreen. You will truly be limited only by your imagination.

After completing this module, you will be able to:

• Explain the role of tables in designing Web pages.
• Use tables to organize Web pages into rectangular regions called cells.
• Flow text and pictures into table cells.
• Recognize the HTML tags that create tables.

Reading

Read Chapter 20 of the Internet Literacy textbook to study the concepts covered by this module.

Online Activities

This module introduces the concept of using tables to create advanced Web page layouts. You will learn how to use tables to organize Web pages into rectangular regions called cells. Then you will flow text and pictures into table cells to create advanced Web page designs. You will also learn to recognize the HTML tags that create tables. The following activities reinforce important concepts and bring the readings to life:

• To learn how to create a table with Netscape, follow the steps in Table 20-1; if you are using FrontPage, follow the steps in Table 20-2.
• Whether to caption a table is a design decision you will need to make. If you want to caption a table, follow the steps in Table 20-3.
• When you enter data into a table, you may want to change text attributes such as font size, color, bolding, or italics. To learn how to do this, follow the steps in Table 20-4.
• After you create a table, you may decide you want to change the table size, border, or background color. To learn how to modify the table parameters, follow the steps in Table 20-5.
• You can insert images inside any table cell. If the image is larger than the cell, the cell will expand to the size of the image, unless you've limited the size of the cell to a fixed pixel width or height. To work through an example, follow the steps in Table 20-6.
• It is possible to subdivide any table cell by creating a table inside the cell. This puts a table grid inside the cell, providing another layer of structure on the Web page. To learn how to add such a structural dimension to your Web pages, follow the steps in Table 20-7.
• By default, each cell in a table is confined to just one row and column. To vary the layout of a table, you can expand a cell to make it span more than one row or column. To learn how, follow the steps in Table 20-8.

Assignment

There is no specific assignment attached to this module. When you hand in your Web pages to be graded, however, your instructor will be looking for evidence that you have learned how to lay out a Web page to control where your text and graphics will appear. Because tables are the most effective way of accomplishing this, you should study this module carefully and plan to use tables to control the layout of the Web pages that you will submit later in the course.