• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 4. Elements of Page Design

Lesson 4. Elements of Page Design

A good way to build quick and basic Web pages is to place content such as text and images directly on a page as you did in the first three lessons of this book. It is a simple and straightforward way of presenting information; however, it is a method with very limited options. You can wrap text around an image; align text or images to the left, center, or right of a page; and create indented blocks of text—but you can't do much more.

One means to gain more control over the placement of elements on your pages is to use tables. Tables in HTML allow you to present information in an organized manner; they contain rows and columns where you can place content in cells. Cells can then be merged to create larger cells. The arrangement of content within tables enables you to construct pages with a greater degree of design precision. Using tables, you can place objects in specific locations on a page and create more complex visual arrangements. In this lesson, you will create several different pages. You will use combinations of tables to develop layouts that are far more compelling visually than the same information would be without the use of tables to display the content.

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

If you would like to view the final result of this lesson, open foghorns.html, lodging.html, lights.html, and lighthouse.html files in the Completed folder within the Lesson_04_Tables folder.


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

  • Create accessible tables


This lesson should take about two hours to complete.


Media Files:

Lesson_04_Tables/Images/…(all files)

Starting Files:

Lesson_04_Tables/Text/…(all files)

Completed Project:






  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint