Format a Web Page Using Tables
(Instruction by Example)
For greater control over the layout of a Web page you might want to use
the Tables feature. The possibilities range from displaying a simple grid
(for a calendar or spreadsheet, for example) to nesting tables within tables
(for a resume or newsletter, perhaps). In addition, you can assign a background
color to all or part of a table (such as a row or a cell), and you can
include an image in a table cell. All of these possibilities are addressed
by example in this document.
Note: The screen images included in this document are taken
from the Windows version of Netscape Composer (version 4.7). Macintosh
screens may differ slightly. |
Creating
a Simple Grid
To create a simple grid containing gridlines (as in the calendar shown
in Table 1, below), follow the instructions outlined.
TABLE 1. Calendar Grid for March 2001
SUN
|
MON
|
TUE
|
WED
|
THU
|
FRI
|
SAT
|
|
|
|
|
1
|
2
|
3
|
4
|
5
|
6
|
7
|
8
|
9
|
10
|
11
|
12
|
13
|
14
|
15
|
16
|
17
|
18
|
19
|
20
|
21
|
22
|
23
|
24
|
25
|
26
|
27
|
28
|
29
|
30
|
31
|
|
|
Setting Table Properties
-
Click on the page where you want the table to begin.
-
Click the Insert Table button on the Composition Toolbar.
-
Set properties in the "New Table Properties" (Windows) or "Insert Table"
(Macinosh) dialog box that appears (see default settings in Figure 1, below).
For the calendar table show above the following settings were entered:
-
Number of rows: 6
-
Number of columns: 7
-
Table Alignment: Center
-
Table width: 300 pixels [the table width can be measured as a percentage
of the window or in pixels (72 pixels = 1 inch)]
-
Click the OK (Windows) or Insert (Macintosh) button when
finished.
Note: The alignment of the text within the calendar was set by hightlighting
all the text and choosing Right Alignment (using the Alignment button
on the Formatting Toolbar).
FIGURE 1. "New Table
Properties" Dialog Box with Default Settings!['New Table Properties' Dialog Box](images/tables-fig01.jpg) |
|
Play with the settings until you get the look you want. For example,
change border line (10 pixels), cell spacing (5 pixels), and background
color as follows to get the modified calendar format shown in Table 2 (below).
TABLE 2. Revised Calendar Grid for March 2001
SUN
|
MON
|
TUE
|
WED
|
THU
|
FRI
|
SAT
|
|
|
|
|
1
|
2
|
3
|
4
|
5
|
6
|
7
|
8
|
9
|
10
|
11
|
12
|
13
|
14
|
15
|
16
|
17
|
18
|
19
|
20
|
21
|
22
|
23
|
24
|
25
|
26
|
27
|
28
|
20
|
30
|
31
|
|
|
Setting Row Properties
Using the Row tab in the Table Properties dialog box, you can make settings
that affect a particular row in your table (see Figure 2, below). This
includes horizontal and vertical alignment, a background color, and even
a background image.
FIGURE 2. Row Properties:
Default Settings![Row Properties Dialog Box](images/tables-fig02.jpg) |
|
To set row properties, do the following:
-
Click somewhere in the row.
-
Access the context-sensitive pop-up menu as follows:
-
On a Windows computer, click the right mouse button.
-
On a Macintosh, hold down the mouse button until the menu appears (about
one second).
-
Click Table Properties (Windows) or Table Info (Macintosh)
to get to the dialog box.
-
Click the Row tab.
-
Change settings as desired.
-
Click the OK button when finished.
Setting Cell Properties
Using the Cell tab in the Table Properties dialog box, you can make settings
that affect a particular cell in your table (see Figure 3, below). This
includes horizontal and vertical alignment, a background color, and even
a background image. [Author's Note: In my experience the "Cell spans" feature
does not work properly, so I do not recommend using it.]
FIGURE 3. Cell Properties:
Default Settings![Cell Properties Dialog Box](images/tables-fig03.jpg) |
|
To set cell properties, do the following:
-
Click somewhere in the row.
-
Access the context-sensitive pop-up menu as follows:
-
On a Windows computer, click the right mouse button.
-
On a Macintosh, hold down the mouse button until the menu appears (about
one second).
-
Click Table Properties (Windows) or Table Info (Macintosh)
to get to the dialog box.
-
Click the Cell tab.
-
Change settings as desired.
-
Click the OK button when finished.
|