Lesson 4. Elements of Page Design

Up to this point, you've had very little control of the design of your pages. You've wrapped text around a graphic and indented text on the page, but these options are limited and don't always provide the desired effect. Tables can provide more control of the placement of these elements. Tables in HTML were originally a means of presenting information in an organized manner; they contain rows and columns where you can place data in cells. Those cells allow you to design pages with a greater degree of control when you place text and graphics. Tables enable you to put the graphics in a location other than the next thing vertically on the page. You can use a cell to create a sidebar for your text, for example.

In this lesson's exercise, you will create tables to hold text and graphics. You will learn how to lay out pages like this one with consideration for the constraints of your users' viewable area.

If you would like to view the final result of this lesson, open biking_table.htm in the Completed folder within the Lesson_04_Tables folder.

WHAT YOU WILL LEARN

In this lesson, you will:

• Learn how to create tables to control the layout of your pages

• Modify the table properties, including border, background, spacing, color, alignment, and size

• Import tabular data from spreadsheets

• Modify a table by adjusting rows and columns

• Sort a table

• Export a table

• Determine the optimal size of your layout

• Import a tracing image

APPROXIMATE TIME

This lesson should take about two hours to complete.

LESSON FILES

Media Files:

Lesson_04_Tables/Images/

Starting Files:

Lesson_04_Tables/Text/bikingtable.txt

Lesson_04_Tables/Text/mt_biking.txt

Lesson_04_Tables/Text/rafting_text.htm

Lesson_04_Tables/Text/student_table_project.txt

Completed Project:

Lesson_04_Tables/Completed/biking_table.htm

Lesson_04_Tables/Completed/destinations.htm

Lesson_04_Tables/Completed/layout.htm