FrontPage 97 supports tables and table attributes to the fullest. Using tables, you can really control the layout of a page in a great number of ways, placing content and images where you want them. Well... sort of.
In the HTML tag family, tables are still growing up. For this reason, browsers handle tables differently. Some older browsers don't recognize tables at all; they leave your hard layout work lying in the dust, displaying a jumble of text and images. You should keep several different browsers around to test your tables as you design them and make compromises when you can.
There is good news, though. The latest versions of Internet Explorer and Netscape handle tables quite well. Each of these browsers has its own nifty little tricks up its sleeves. When designing pages to view in Netscape 3.0 and Internet Explorer 2.0, you can specify different colors for individual cells. Internet Explorer 3.0 adds even more flexibility in how you can view tables. You have the capability to specify a separate background image for each cell as well. Tables are the way to go if you want to create a fancy layout.
A table has several elements, and to understand them is to understand the terminology needed to create them. Figure 11.1 shows an example of a basic table.
Figure 11.1 : The basic elements of a table are rows, columns, cells, and borders.
You'll see the following elements:
You enter a basic table in your page first by choosing the Table | Insert Table command. This command invokes the Insert Table dialog box, from which you can specify several table attributes.
By default, FrontPage creates a table that contains two columns and two rows and spans the entire width of your page. The table is aligned in the center of your page, has no border, has a cell padding of 1, and has a cell spacing of 2 pixels.
You can specify several different values for your basic table. Follow these steps:
TIP |
You can preview your settings by clicking the Apply button in the Table Properties dialog box |
The Insert Table dialog box enables you to specify the number of rows and columns your table contains. You can also specify how the table aligns on the page and choose a table width in percentage of screen or pixels. You can specify the overall cell padding and cell spacing values in this dialog box, too.
You set the number of rows or columns in the Size section of the Insert Table dialog box. First, enter the number of rows in the Rows field, or use the up and down arrows to select a value from 1 to 100. Then, enter the number of columns in the Columns field, or use its up and down arrows to select a value from 1 to 100. Figure 11.3 shows a table that contains five rows and three columns.
Figure 11.3 : A basic table with five rows and three columns.
The Table Alignment setting is the first in the Layout section
of the Insert Table dialog box. This setting is not for the alignment
of the contents within the cells; it controls how the entire table
is aligned on your page.
NOTE |
If you want to design tables that display fairly consistently in several browsers, you need to make some compromises. Some browsers don't recognize the right-alignment setting and align the table to the left side of the page instead. |
To choose a table alignment, select one of the following options from the Alignment drop-down list box in the Layout section of the dialog box:
Figure 11.4 shows examples of left, center, and right alignment applied to the table in our example. The Alignment setting won't be noticeable unless the table width is set to a value of less than 100 percent.
Figure 11.4 : Tables aligned to the left, center, and right of a page.
The Border Size setting controls the width of the border that appears around the outer edge of the table. Many people use tables to enhance page layout, placing graphics and text in fixed areas of the page. Most commonly, the tables used in this manner don't have borders; using them would detract from the effect of the layout. When you specify a border of 0, the FrontPage Editor displays the borders of the table and cells in dotted lines. Not to worry-this is just a guide for you to place your content in the cells. When you view the table in other browsers, you won't see those border designations. Figure 11.5 shows the table from Figure 11.3 with a border added.
Figure 11.5 : A border is added to the table.
The Border Size setting is found in the Layout section of the Insert Table dialog box. To set the border size, you can do one of two things:
The Cell Padding setting controls how far from the edge of the cell's border its contents appear. To see what I mean, compare the top table in Figure 11.6 to the middle table, which does not use cell padding.
Figure 11.6 : Examples of cell padding and cell spacing.
TIP |
For text content, you probably want to use cell padding and cell spacing to improve the appearance of your tables. If you want graphics to get as close to each other as possible to give the illusion that the table is one solid graphic, you might want to set cell padding and spacing to 0. |
You specify Cell Padding settings in the Layout section of the Insert Table dialog box in one of two ways:
The Cell Spacing setting controls the width of the borders between cells (the row and column dividers, so to speak). Refer to Figure 11.6, where the center and bottom tables have cell spacing added. Compare them to the top table, which does not.
To set cell spacing, you use one of the following two methods:
You can format tables to different widths by using the Width section of the Table Properties dialog box. Figure 11.7 shows some examples of different table widths that are left-aligned. You set table width in percentage of screen or in pixels. You can also uncheck the Specify Width button to create a table that is sized based on the content within the table.
Figure 11.7 : You can specify a table width other than 100 percent.
TIP |
In most cases, you want to specify the table width in percentage of screen because users might have their browser windows sized differently instead of maximized. Also, some users browse the Internet in 640×480 resolution, whereas others use 800×600 or 1024×768. If you specify the width in percentage of screen, the table resizes to accommodate the user's browser window. On the other hand, if you're adding graphics to your tables, pixel settings help you visualize the table layout before the graphics are inserted. You should note, however, that when a user resizes his browser window or views it in a different resolution, portions of your table might not be visible. Perhaps a good rule of thumb here is to size your pixel table width for 640×480 resolution, and size your graphics accordingly. You should be fairly safe with that setting in most cases. |
To specify table width, follow these steps:
Several new tags in HTML 3.2 enable you to enhance a table's appearance.
It should be noted that these are proposed tags and are not widely
supported as yet by browsers. Table 11.1 lists these tags. You
add these attributes by specifying extended attributes for the
table.
NOTE |
You won't be able to view the results of these extended attributes in the FrontPage Editor. You can, however, view the results in a browser that supports these tags and attributes. |
Name | Value | Function |
ALIGN | BLEEDLEFT | Aligns the table to the left edge of the window border. |
ALIGN | BLEEDRIGHT | Aligns the table to the right edge of the window border. |
COLSPEC | Cn, Ln, or Rn | Specifies column alignment of each column in the table. Acceptable values are Cn, Ln, and Rn. A table with four columns, for example, could have the following value entry: L20 R25 C100 C150. The first column will be 20 pixels wide and left-aligned, the second column will be 25 pixels wide and right-aligned, the third column will be 100 pixels wide and centered, and the fourth column will be 150 pixels wide and centered. |
FRAME | ABOVE | Displays a border at the top of the table frame. |
FRAME | BELOW | Displays a border at the bottom of the table frame. |
FRAME | BOX | Displays a border on all sides of the table frame. |
FRAME | HSIDES | Displays a border on the top and bottom sides of the table frame. |
FRAME | LHS | Displays a border on the left of the table frame. |
FRAME | RHS | Displays a border on the right of the table frame. |
FRAME | VOID | Removes all outside table borders. |
FRAME | VSIDES | Displays a border on the left and right sides of the table frame. This is an Internet Explorer 3.0 feature. |
RULES | none | Removes all interior table borders. |
RULES | ALL | Displays a border around all rows and columns. |
RULES | BASIC | Displays horizontal borders between the table head, table body, and table foot. |
RULES | COLS | Displays horizontal borders between all table columns. |
RULES | ROWS | Displays horizontal borders between all table rows. |
You use the Insert Table dialog box or the Table Properties dialog box to add extended attributes for a table. A portion of the Table Properties dialog box is shown in Figure 11.8.
Figure 11.8 : Adding an extended table attribute.
To add an extended attribute to a table, follow these steps:
If you want to create your own table, create a new page in the FrontPage Editor. Use the example shown in Figure 11.9 to try a table yourself.
Figure 11.9 : Insert a table with three rows and two columns.
To insert the table, follow these steps:
New to FrontPage 97 is the capability to apply table background colors, border colors, and background images to tables within the Table Properties dialog box. If you've been working with previous versions of FrontPage, you are aware that these attributes were once implemented by using extended attributes. Not only are these attributes now easily implemented through the dialog boxes, but the FrontPage Editor also supports viewing the table colors and background images.
You assign these settings in the Table Properties dialog box, which is shown in Figure 11.10. The upper section of this dialog box contains many of the settings that you entered when you created your table. The lower section of the dialog box contains the Custom Background section, where you specify background and border settings for the table.
To specify table background and border properties, follow these steps:
After you place your table on your page, it's easy to place text, images, bots, or forms into the cells. The procedures to add content into tables are the same as those used to enter content on a page that doesn't have tables.
Start first with a basic text table to learn how easy it is to enter content into tables. Enter the following text into your table or make up your own example.
To enter text into your table, follow these steps:
Many times, tables are used to lay out text and images on a Web
page because they offer more control over where images are placed.
You'll learn more about this in a
later example. For now, add an image to the first row of your
table. Follow these steps:
You also can create a nested table-a table within a table. It is sometimes easier to create more complex tables using this approach. In the example shown in Figure 11.13, the original table contained four rows and three columns. A second table is inserted into the second cell in the fourth row. The table that is inserted has no borders and a width of 100 percent.
Figure 11.13 : You can create more complex tables by inserting tables within tables.
To insert a table within a table, follow these steps:
You're looking at the table you just created and saying, "So, what's the big deal? Just looks like a standard table to me!" As you are about to learn, you can reformat the cells in your table in a variety of ways.
You can apply cell formatting to a single cell or to multiple cells at once. To do this, you need to select the cells first. You can select a group of cells, an entire row or column, or the entire table.
To apply cell formatting to cells, you select only the cells you want to apply the formatting to before you choose the Edit | Properties or Cell Properties command.
To select a single cell or multiple cells, follow these steps:
You can select an entire row or multiple rows at a time. A good example for doing this is formatting all the cells in the row as header cells.
To select an entire row, use one of these methods:
If you want to change the width of an entire column of cells, you can select one or more columns using one of these methods:
To delete a table from your page, you need to select the entire table. To select the entire table, use one of these methods:
It's pretty easy to delete cells from your table. Actually, all you have to do is select the cells, rows, or columns you want to delete and press the Delete key.
After you select your cells, you use the Cell Properties dialog box, shown in Figure 11.14, to change the properties of the cells. This dialog box enables you to set the properties of a single cell or a group of selected cells in your table. Just as you can assign a background color or image to an entire table, you can also assign a background color or image to individual cells. The settings you can choose from are described in the following sections.
Use the Cell Properties dialog box to specify properties for your cells. To open the Cell Properties dialog box, follow these steps:
You set horizontal alignment in the Layout portion of the Cell Properties dialog box. You can choose left, center, or right alignment. The first row of the table in Figure 11.15 shows examples of these alignments.
Figure 11.15 : Contents of cells can be aligned horizontally and vertically.
To specify horizontal alignment, follow these steps:
You also set vertical alignment in the Layout portion of the Cell Properties dialog box. You can choose to align the contents of your cell at the top, middle, or bottom sides of the cell. Refer to the second row of Figure 11.15 for examples of these types of alignments.
To specify vertical alignment, follow these steps:
You can specify a minimum cell width for each column in your tables.
When you specify cell width, select the entire column of cells
so that they are all formatted in the same width. To specify minimum
cell width, follow these steps:
NOTE |
It is best to format cell widths before you split and merge cells. |
The procedures to choose cell background colors and images are the same as those discussed in "Setting Table Background and Border Properties," earlier in this chapter. The only difference is that you can apply these properties to any cell or group of cells within your table. Each cell in your table can have a different background color, image, or border color if you so choose.
To assign background and border colors to individual cells, simply select the cells that you want to change, and select background and border colors as indicated in "Setting Table Background and Border Properties."
It's typical to assign the top row and the first column in your table as header cells. Figure 11.16 shows a table where the top row is formatted as header cells.
NOTE |
When you format cells as header cells, the contents of the cell become what appear to be emphasized (or bold) text. You won't be able to use the Bold button on the Format toolbar to remove the bold formatting from the header cell. You need to convert the header cells back to normal cells for this. You can also italicize, underline, or use a fixed-width font in a header cell. |
To change selected cells into header cells, enable the Header Cell checkbox in the Layout section of the Cell Properties dialog box. To remove header cell formatting, disable the Header Cell checkbox.
As you work with your tables, you sometimes need to insert additional cells, rows, and columns. The following tasks describe the procedures to add additional cells and how to split and merge cells to create advanced tables.
You also can insert new rows or columns into your tables by using the Insert Rows or Columns dialog box.
To insert new columns, follow these steps:
To insert new rows, follow these steps:
NOTE |
When you insert rows or columns in your table, the new row uses the same number of cells as the row that you select to insert before or after. This is important to keep in mind when you insert new rows in tables that have split and merged cells. |
You can insert a new cell into your table. When you do this, the contents of the other cells shift over. You might need to reformat cell widths in that row to compensate. Sometimes, you want this shifting to happen, but you might be better off splitting the cell that appears before the cell you want to insert. That way, your table layout isn't affected.
To insert a cell, follow these steps:
Splitting cells is the opposite of merging cells. You can split a cell into multiple rows or columns. Figure 11.17 shows an example of this. The top table, which has two columns and two rows, was split using the Split Cells command. The first column in the first row was split into three columns, and the second column in the second row was split into five rows. The bottom table of Figure 11.17 shows the results.
Figure 11.17 : Cells can be split into multiple rows or columns.
To split a cell, follow these steps:
You can make a cell or group of cells span more than one row or column. Select an entire row, an entire column, or a range of contiguous cells, as shown in the top table in Figure 11.18, and choose the Table | Merge Cells command. The bottom table shows what the cells look like after they are merged.
Figure 11.18 : You can merge cells for advanced layout.
After you split cells, it sometimes can be a little confusing as to how to select them. How do you find out which row the big area is in? How do you select the smaller cells to the right of that big cell?
Figure 11.19 shows how you find out. Position the insertion point at the left edge of the table near the row you want to select. The cursor becomes a small arrow. Click to select the row.
Figure 11.19 : Selecting rows after splitting.
As you can see in the top table of Figure 11.19, the first row (which contains the cell that you split into columns) is still intact as a row.
Now look at the center table in the figure. The second row contains that big cell. To select it and its corresponding cell in the second column, place the mouse at the left side of the table, directly opposite the cell in the second row of the second column.
To select the cells in rows 3 through 7 of the table, position the mouse at the left side of the table, directly opposite the cell or cells you want to select. Click to select the row. The bottom table in Figure 11.19 shows this.
A similar situation occurs with the cells that were split into columns. The first column contains the big cell and first cell in the first row because those were the cells that were there originally. The second through fourth columns (the ones you split) don't have any additional cells associated with them in the example. All three of these cells are selected in the center table shown in Figure 11.20. The fifth column is still intact as a column, as shown in the bottom table of Figure 11.20.
Figure 11.20 : Selecting columns after splitting.
You add extended attributes to cells in a similar manner as described
earlier in "Using Extended Table Attributes." Table
11.2 lists the attributes you can add. Attributes that apply to
cells fall in three categories: TH (for header cells),
TR (for rows), and TD (for data cells).
Name | Value | Function |
COLALIGN | LEFT | Left-aligns contents of all cells in the column. |
COLALIGN | RIGHT | Right-aligns contents of all cells in the column cell. |
To add extended attributes to a cell or group of cells, follow these steps:
Tables don't always have captions, but in some cases, captions are necessary. They help you point out what the table is about. When you apply a caption to a table, it actually becomes part of the table instead of a separate line of text. Generally, a table caption uses one line.
To add a caption to a table, follow these steps:
To select a table caption, move the pointer to the left of the table caption and click to select it.
Build a quick example of a table that combines some of what you've learned here:
When you're finished, your table should look like Figure 11.21. You can assign links to the images in the upper-right portion of the main table, and you can add text to the other cells in the table to describe the things you are linking.
Figure 11.21 : A fancier table with graphics and alignment.
I hope I've started the wheels turning now. I think you can see from what you've learned in this chapter that tables aren't just for data any more. They go a long way in dressing up your pages and can sometimes compensate for using image maps on your pages.
You've covered a lot of ground in this chapter. You learned what tables are and the many ways you can use them. You built a basic table and applied table properties to it. And then, after learning the many ways in which you can format cells, you got a taste of building a more advanced table, complete with graphics. You also learned ways in which you can give your tables a fresh look for those users with Internet Explorer for browsers. Well done-you deserve a hearty pat on the back!
In the next chapter, you'll begin to develop a Web site, using many of the techniques you learned in this section of the book. You'll begin to plan your Web site while developing a welcome screen, home pages, and navigation pages.
For information that relates to this chapter, refer to the following chapters:
Q: | Are there any other compromises that can be made for browsers that don't support tables very well? |
A: | One workaround is to build your table as you usually do and then make a screen capture of it while viewing the table in the FrontPage Editor or another browser that supports tables. Insert the graphic of the
table onto your page instead of the actual table. For browsers that don't support graphics or for folks who have graphics turned off, create a text alternative of your table on another page. Use formatted paragraphs or a typewriter font to neatly align the contents of the page. Then, provide a link to the text version on the page that contains your original table. |
Q: | I inserted a table at the very beginning of my page, and now I want to add text up there. I can't figure out how to do that because my cursor won't go above the table. Help!!! |
A: | Choose Table | Select Table to select the entire table. Cut it into your clipboard using Edit | Cut or Ctrl+X. With the insertion point at the upper-left corner of the page, paste the table back into your page using Ctrl+V. You should now have a space above the table to add more content. |
Q: | I'm using a background that puts a really neat design at the left side of my page. I used the Increase Indent button to position my text beyond that border, but some browsers put the text at the beginning of the page over the border. How can I fix that? |
A: | Put your page contents in a table. Create a table that contains one row and two columns and spans 100 percent of the page width. Create a spacer graphic that is as wide or slightly wider than the design on the left side of your background. This spacer graphic doesn't have to be that tall-even one pixel will do. After you insert the spacer graphic into the left table cell, use the Make Transparent button on the Image Toolbar to add transparency so it doesn't show. |
Q: | I formatted my tables for 50 percent width and aligned them to the right side of my page. Now I want to put text on my page at the left side of the table, but I can't. What gives? |
A: | Tables are an entity unto themselves. The table might be formatted to display in a portion of your screen, but the areas to the right and left are also a part of that table. What you can do is insert another table on your page that spans 100 percent page width and has one row and two columns. Uncheck the Specify Width button to expand the columns to fit their contents as necessary. Next, reformat your original table for 100 percent width. Cut or copy it to the clipboard and paste it in one of the cells in the new table. Then, you can add your text in the other empty cell. |