|
|
|
| Lesson #7: Tables, Part One Vocabulary
Process Flow
Background
Why Use Tables? The problem with using tabs and spaces in establishing your layout is that your overall design will never be stable. Elements that appeared in parallel columns on your screen might be dramatically rearranged on another viewer's screen, and carefully crafted presentations quickly become unintelligible if you don't take browser and hardware differences into account. In order to maintain consistent design integrity, consider using tables. What tables do is to divide large areas of a document into smaller, more self-contained units. Changes can be made in individual table cells without impacting upon the content of the entire table, and tables can help guarantee that individual design elements will remain in proximity to each other. For example, when I designed the Writing Center's website, I wanted to use a three-column format. In the left column, I placed the site's standard navigation buttons; the welcome graphic is presented in the center of the page, and I wanted a list of new links on the right side of the page:
There are two simple methods that I can use to achieve the layout above. The simplest, though least effective, would be for me to use the space and tab keys to align individual elements along a horizontal axis. The problem with this method is that changes to any one element will impact upon the alignment of all the other design elements; more significantly, if a viewer uses hardware and software different than what I used to develop the page, this simple three-column format may fall apart completely. Instead, I chose to use a simple table of three columns (the vertical elements of a table) and one row (the horizontal elements of a table) to make sure that my design is consistent across software and hardware differences. The navigation buttons appear in Cell A, the welcome graphic is in Cell B, and the featured links are listed in Cell B. Below is a schematic of the table's design:
Below is the same opening page to the Writing Center's website, with the table borders displayed. Note that the table borders are indicated by the dotted lines:
By using tables, I can change the center graphic, for instance, without changing the alignment of the navigation buttons or the featured links list. This design is very stable, and the majority of my viewers will see the page as I originally intended.
Creating a Table Open a new page and place the cursor at the location where you want to insert your table. Go to the Table main menu item, select Insert, then Table:
Selecting the Insert Table item will display the Insert Table dialogue window. This window is used to specify the number of rows and columns used in your table. You also can set additional table properties, such as border width, in this dialogue window. These options will be discussed in part two of this lesson. The Insert Table dialogue window appears as below:
In the example above, I specified that my table will have two columns and three rows. I can add additional rows and columns later, if necessary. Clicking OK will bring me back to my new page. Please note that the borders of my table appear as boxed lines. Table lesson two will explain how these borders can be modified.
I can click in any of the table's cells to enter text or graphics. In the example below, I decided to place text and graphics in my table:
Please note that I can left justify, right justify, or center any content or individual element in any specific table cell. In this context, think of individual table cells as semi-autonomous pages that can contain their own unique formats. Simple Table Adjustments Adding additional rows and columns is very easy. First, click in the cell adjacent to where you want to add a row or column. Go to the Table main menu item, select Insert, and then select Rows or Columns:
In the Insert Rows or Columns dialogue window, specify the number of rows or columns that you want to add to your table, as well as the location of this new material. In the example below, I decided that I would add a single row to the bottom of my table:
Note that after I click OK, the new row is added to my table. I highlighted the new row in black:
By default, FrontPage initially sets all columns equal in width. You can adjust the width of individual columns by click and dragging with your mouse. To adjust the width of a specific table column, carefully place your cursor on the border between the table columns. Note how the cursor changes to a double arrow:
When the cursor turns into a double arrow, hold your left mouse button down and drag to the left or right to enlarge or reduce the width of the column. When the column's width is readjusted, release the left mouse button:
Summary This lesson provides a brief introduction to the use of tables in web layout and design. In the second lesson on tables, we will explore how to adjust table alignment, border sizes, and table background colors.
|
|
|
