Customizing Table Layout, Size, and Appearance

Customizing Table Layout, Size , and Appearance

Drawing or inserting tables is the easy part; getting tables so that they have the exact layout, size and appearance you want takes a bit more work. Don t worry, we won t leave you hanging without a few pointers ”customizing your tables is exactly what this section is all about.

Positioning Tables Precisely for Alignment and Text Flow

Often a table you re creating will be a part of a larger document. For example, you may be adding a weekly sales record by region to a quarterly sales report, or you may be adding feature comparisons to your product page. In this case, you probably want to align the table so that it is centered, or on the left or right side of the page. You ll also probably want to specify how text or other page elements should flow around the table. For example, if a table has a left alignment, you might want text to flow around the right side of the table. Or you might want a table to be centered with no text to the left or right of it.

By default, tables are left-aligned and the flow is such that page elements are placed either above or below the table. You can change the alignment and flow of page elements around a table by completing the following steps:

1. Right-click anywhere in the table, and then select Table Properties from the shortcut menu. This displays the Table Properties dialog box, shown in Figure 9-4.

   
   Figure 9-4: Use the options in the Layout panel to control the alignment and flow of text and other objects around the table.

2. Use the Alignment selection list to manage the alignment of the table relative to other objects. Select Left to left-align the table. Select Right to right-align the table. Or select Center to center the table on the page.

3. Use the Float selection list to manage the flow of text around the table. Select Left to left-align the table, and place text or other elements on the right. Select Right to right-align the table, and place text or other elements on the left.

4. Click OK to update the table s properties.

Note  

When the table alignment and float values are set to Default, settings of the user 's browser determine the alignment and float that are used. In most cases, this means tables are left aligned and the flow is such that page elements are placed either above or below the table.

Sizing Tables Precisely

As with images, you can set table width and height settings in pixels or as a percentage of the current window size:

• When you size tables using pixels, you set a fixed table width, height, or both. For example, you might want a table to be precisely 300 pixels wide and 500 pixels in height.

• When you size tables as percentage of the current window size, you set width, height, or both, relative to the width and height of the browser window. For example, if you set the relative width to 75% and the browser window is 1024 pixels wide, the table will be 768 pixels wide. On the other hand, if the browser window is 600 pixels wide, the table will be 450 pixels wide.

More often than not, you will use relative sizing to allow readers browsers to size the table. Sometimes, however, you ll need to use a fixed size for your table. You might, for example, need to ensure an image or text is positioned to the left of right of the table. Here, you would use a fixed size to get a specific result. If you decide to use a fixed size for a table, you should preview the page at various screen and display sizes to test the results. In most cases, you will want to design your page with 800x600 and larger display sizes in mind.

You can set the size of a table by completing the following steps:

1. Right-click anywhere in the table, and then select Table Properties from the shortcut menu.

2. Under Layout, select Specify Width. You can then:

   • Set Fixed Width To set a fixed size, select In Pixels, and type a pixel size, such as 600, in the field provided.

   • Set Relative Width To set table size relative to window size, select In Percent, and type a percentage, such as 90, in the field provided.

     Note  

     For a consistent look and precise flow, even when the page is viewed at different screen sizes, use a fixed width, such as 700 pixels. Keep in mind that 800x600 is a common screen size for most PCs. If you use a width larger than 800 pixels, users with smaller screen widths will have to scroll to view parts of the table ”and most people hate to use horizontal scrollbars.

3. If you want to specify the table height as well, select Specify Height. You can then:

   • Set Fixed Height To set a fixed size, select In Pixels, and type a pixel size, such as 600, in the field provided.

   • Set Relative Height To set table size relative to window size, select In Percent, and type a percentage, such as 90, in the field provided.

4. Click OK to apply the changes.

Getting Creative with Table Borders and Formatting

When you create tables to organize facts, figures and other data, you ll usually want to have a border, both around and within the table, to delineate the rows and columns . By default, tables have borders, which are formatted as shown in Figure 9-5. Not very appealing, is it?

Figure 9-5: Most of the time, table borders are a pair of lines, with the area between the lines painted the same color as the page background.

With the default settings, the border is a pair of lines, with the area between them painted the same color as the page background. You can get creative with the table border settings in a couple of different ways. One is to use the border size, color, and shading options of the Table Properties dialog box.

Another fast way to change the look of the table is to use Table AutoFormat, which lets you apply any of over 50 ready-to-use formats. Styles available include simple, classic, colorful , grids, lists, 3D effects, contemporary, elegant, and professional.

To AutoFormat a table, follow these steps:

1. Click anywhere in the table, and then choose Table, Table AutoFormat. This displays the dialog box shown in Figure 9-6.

   
   Figure 9-6: Use the Preview area to help you choose a format that you like.

2. Use the up and down arrows on your keyboard to move through the format list, until you find the format you want to use. In the Table AutoFormat dialog box, the style and layout of the currently selected table format is shown in the Preview area.

3. If a table format you want to use has special formatting that you don t like, use the options of the Apply Special Formats panel to change the format. Two options you might want to select or clear are:

   • Heading Rows Clear this option if you don t want to use shading, or other special formatting applied to the top row of the table. You ll also want to clear this option if your table doesn t have a heading row.

   • First Column Clear this option if you don t want to use shading, or other special formatting applied to the top column of the table. You ll also want to clear this option if your table doesn t have row labels in the first column.

4. When you re ready to format the table, click OK.

Adding Background Colors and Pictures to Tables

You can add background colors and pictures to an entire table, or to individual cells in a table. Figure 9-7 shows how you can use a background picture in a table. When you use colors and background pictures, you should preview the page afterward to make sure the text is readable.

If the text is unreadable, you'll need to change the background color or picture. For example, the table shown in the figure originally had black text, but after adding the picture, we had to change the text to white, so that the table data was readable.

Figure 9-7: You can add background colors and pictures to tables; if you do, make sure the text is readable.

You can specify the background colors and pictures you want to use by completing the following steps:

1. Right-click anywhere in the table, and choose Table Properties.

2. Under Background, use the Color selection list to set the table s background color. If you use Automatic, the background color is set to use the browser default, which is usually the same as the background color of the page.

3. Select the Use Background Image check box, and then click the Browse button to find the background picture you want to use.

   Note  

   As with page backgrounds, the background picture for your table should be in GIF or JPEG format. If it isn t, however, FrontPage should convert it to either GIF or JPEG for you automatically, as discussed in Chapter 7, Using Pictures in Web Pages.

4. Click OK.