How Tables Work in Frontpage

The Insert Table button in the Standard toolbar, seen in Figure 10.5, lets you create a table x cells across by y cells down similar to other products in the Microsoft Office System. Table properties can be set through the Table Properties dialog box, shown in Figure 10.6. The Table Properties dialog box can be invoked by right-clicking anywhere within the table and selecting the Table Properties option from the menu.

Figure 10.5. A 7 by 7 table is selected from the Insert Table button in the Standard toolbar.

Figure 10.6. The Table Properties dialog box lets you set almost all options of any table in your site.

NOTE

You can also insert tables through the Table toolbar or the Layout Tables and Cells task pane, both discussed later in this chapter.

TIP

The Insert Tables button in the Standard toolbar can also be called in Code or Split view. If you insist on hand-coding your Web site, allow FrontPage to do the tedious work of writing the tags associated with a complete table.

Tables are sized either by pixel or by percentage of screen size. When a specific pixel size is set, the browser will usually show the table in the desired size. If a percentage is set, the table will be presented as a percentage of screen size.

If you are frustrated that your table text seems to line right up against your table borders producing an awkward affect, see "Text Touching Borders" in the "Troubleshooting" section at the end of this chapter.

NOTE

If a picture is placed in a table larger than the selected pixel size or percentage, most browsers will present the entire graphic, ignoring the table size definitions.

All content that can be placed on a Web page can be placed within a table. In addition, tables and cells can have separate background images and colors.

TIP

Mastery of tables is mastery of Web design. Spend some time in this chapter and practice layout processes and approaches using tables.

There are no limits to the cells that can be placed within a table. In addition, tables can be placed within tables for additional design power and flexibility.

If you notice that FrontPage seems to be overriding your cell specifications, see "Cell Content Is Bigger Than Defined" in the "Troubleshooting" section at the end of this chapter.

In Figure 10.6, the Table Properties dialog box was shown. In Figure 10.7, the Cell Properties dialog box is shown. Notice the difference in variables between the two. Where the Table Properties dialog box sets issues that will affect the entire table, the Cell Properties dialog box can be used to better define specific areas of the table.

Figure 10.7. Cells have fewer variables for design than tables do, as seen in the Cell Properties dialog box.

NOTE

If you tell a table to do one thing and a cell to do another (such as show background color), the cell will win.

Cell Properties

You are not confined to table modification in FrontPage. You can also edit numerous cell properties. The Cell Properties dialog box shown in Figure 10.7 lets you set the following options for each cell:

• Horizontal and Vertical Alignment Relates to the content within the cell and how it is aligned.

• Rows and Columns Spanned This option will force the cell to expand to the number of rows and columns selected pushing the existing cells outward into the table. This will not delete any other cells in the table; it will simply push them out in the directions supplied through this option. Figure 10.8 shows a 5 by 5 table. Figure 10.9 shows the same table with the highlighted cell spanned two cells in each direction.

  Figure 10.8. A simple 5 by 5 table.

  

  Figure 10.9. The table from Figure 10.10 with a cell pushed out to span two cells in each direction.

  

• Header Cell This check box lets you set a cell as a header cell. This option has no direct effect in page layout, but will send the metadata to any element that might read the content accordingly, such as Microsoft Excel. If the No Wrap check box is set, cell content will not be allowed to wrap, resulting in an expanded cell if content exceeds the cell size.

• Specify Height or Width Similar to the Tables Properties dialog box, these variables are set as either pixel or percentage specific.

• Borders and Background These areas are the same as the Tables Properties dialog box.

Pixels Versus Percentages

When tables are used in the Web page layout process, basic layout effects can be produced by setting table and cell sizes as percentages of page or table layout. This has the additional benefit of providing page content that "works" despite browser screen size. In Figure 10.10, a three-celled table is used to produce a two-column effect by giving the columns 45% of the table size and giving the middle spacer area a 10% setting.

Figure 10.10. A three-celled table is used to provide a two-column effect that will work on any screen size.

NOTE

If you are going to assign cells based on a percentage of screen size, make sure that the total percentage adds up to 100%.

Tables can also be sized by pixel, providing an exact sizing element for page design. Although it gives the ability to provide a specific design specification, odd effects can result when a browser sized differently than the page views the page content. Pixel-specific page design should be used with this issue in mind.

Effective page design can be accomplished with a careful combination of pixel and percentage specific sized cells. In Figure 10.11, such a combination is used to set the menu bar to a specific pixel size while allowing the rest of the page to fix the browser window.

Figure 10.11. The menu bar to the left of this table has a specific pixel size. Content to the right of the menu bar will expand as the page does because the table is set to 100%.

Table Properties

The Table Properties dialog box shown previously in Figure 10.6 enables you to set the following options for each table:

• Layout Tools This area lets you toggle between the automatic enabling or disabling of layout tools. Layout tools are discussed later in this chapter but are the means to place tables and cells at precise pixel locations in a paradigm similar to traditional page layout. Also provides an option to enable tools based on site content.

• Size Sets rows and columns for each table.

• Alignment Sets specific alignment properties for the table. If a table is less than 100% the size of the screen, the Alignment variable will determine whether the table is aligned to the left, right, or center of the screen. If default is set, the table will align with the content surrounding it.

• Float This dropdown menu lets you set how the content within the page floats. The Float option sets the way that table elements flow around the table (if the table is not as wide as the Web page). In the Float box, click the float setting you want.

• Cell Padding and Spacing Represent the pixel separation between the borders of the table and the content within it. When set to 0, table content will line up directly against any table border.

• Specify Width and/or Height Provides the means to set table width and height (either in pixel or percentage).

• Borders This area lets you set the size and color of the table border. You can also choose from light and dark border options through the two dropdown menus. A check box lets you decide if you'd like to collapse the table border. A collapsed border is a border with a single line, not two lines with spaces between them.

• Background Lets you choose a background color or picture for the table. Use the Browse button to locate an image file for use as a background.

The last check box in the Table Properties dialog box enables you to request that FrontPage set all tables on that page with the same variables.

The Tables Toolbar

In some cases, most table and cell requirements can be set through the Insert Table button and modification of the table and cell properties as described previously. FrontPage also provides additional table and cell modification and creation through the Tables toolbar, shown in Figure 10.12.

Figure 10.12. The Tables toolbar provides numerous options for table creation and modification.

Each of the buttons in the Tables Tools bar are as follows (from left to right):

• Show Layout Tool Toggles the layout tool on and off.

• Draw Layout Table and Draw Layout Cell Give you the tools to develop layout tables and cells. These tools are discussed later in this chapter.

• Draw Table This tool gives you the ability to draw a single celled table anywhere on your Web page.

• Eraser This tool lets you erase a table's sides or cell borders within a table.

• Insert Rows and Insert Columns Add the desired elements to an existing table.

• Delete Cells, Merge Cells and Split Cells Additional cell management tools that act as their titles describe.

• Align Top, Center Vertically, and Align Bottom All position text within a single cell.

• Distribute Rows Evenly and Distribute Columns Evenly Can take a table of multisized cells and clean them up.

• Autofit to Contents Sizes a cell based on contents over the developer's original input.

• Fill Color Sets the fill color for the cell you are working in.

• Table Autoformat Combo Tells FrontPage to autoformat your table based on the style selected from the combo box.

• Table Autoformat This button activates the Table Autoformat tool.

• Fill Down and Fill Right These buttons tell FrontPage to fill content down the cell or to the right of the cell accordingly. The Fill Right button only appears if multiple cells (side by side) are selected.

Another option for modification and creation is in the Layout Tables and Cells task pane, described later in this chapter.

Using the Drawing and Erase Tools

Selecting the Drawing tool (table and cells) replaces your pointer with a pencil-like icon. You can use this tool to "draw" a table or cell on your screen, as can be seen in Figure 10.13.

Figure 10.13. The drawing tool can be used to quickly draw a table of any size in Design view.

When the Erase tool is selected, the pointer is replaced with an eraser icon that can be used to "erase" cell and table borders. This results in two tables or cells merging with each other and is used to produce additional layout effects. An example of this can be seen in Figure 10.14. It is essentially the same as merging cells.

Figure 10.14. The Erase tool is used to erase the fourth cell border in a table, producing a single cell in that area of the table.