Lesson #8: Tables, Part Two
(click here for a printable version of this page)

Vocabulary

    • Rows: the horizontal elements of a table.
    • Columns: the vertical elements of a table.
    • Cell: an individual "box" in a table.
    • Borders: the boundary lines that define table elements.
    • Cell Spacing: the space between individual cells.
    • Cell Padding: the minimum space between the content of a cell and the cell border.
    • Pixel: a standard unit of measurement used to define the height and width parameters of specific design elements.

Process Flow

    • Rough out the general structure of the table.
    • Adjust table alignment.
    • Adjust the alignment of content within individual cells.
    • Check for browser compatibility.

Background

    • Be aware that some advanced table layout features, such as background cell images, are not compatible with all browsers.
    • Table borders can be "turned off" to offer a seamless design and layout.
    • Pages based on tables offer greater design stability than pages that are not based on tables.

Step One: Table Alignment and Border Width

      Create a simple two row, three column table as outline in the previous lesson. The table should look like this:

      Go to the Table main menu item, then select Properties, Table:

      The Table Properties window allows you to set table various options, such as border width, table alignment, and background colors:

      To set the overall alignement of the table on your page, select an option from the alignment drop-down list. In practice, the two most useful options are left-aligned and center-aligned:

      By default, border size is set at a value of one. Border width has a direct relationship to the value entered in this field; the greater the number, the wider the border. A border value of zero would mean that the table borders would be invisible. In the example below, the table border is assigned a value of 3, which means that the borders will be fairly wide:

      The table, when assigned a border value of three, looks like the following:

       

      Note that wide table borders can provide a three dimensional perspective. If I had assigned a border value of zero, the table would be define by dotted lines in FrontPage Editor.

       

Step Two: Table Width and Height

      There are two ways that you can set the width of your tables. The first is based on the relative size of the browser window; by default, the relative width of your table is set at 100%, which means that the table will span the entire width of the viewer's screen or browser window. This percentage can be set lower by entering a different percentage in the Specify width option:

      In practice, the most useful table width percentage is 100%; because browser window size and monitor sizes and resolutions will vary, you cannot guarantee a similar look and feel for your pages when table width percentages are set for values less than 100%.

      Tables can have absolute widths, which means that the width of a table is fixed and independent of browser window size and monitor considerations. To set a fixed width for your table, select the In pixels radio button, then enter a pixel value (a pixel is a standard unit of measure):

      Please note, however, that if you select a pixel value greater than that support by your user's monitor size and resolution, your user will have to scroll left and right to see your entire table. In practice, it is best to limit the absolute width of your tables to no more than 700 pixels.

      If some variation in layout is acceptable, then go with the 100% width option. If you need greater control over your layout, then enter a specific pixel value for your table width, making sure that it does not exceed 700 pixels.

      You will note that you can specify an absolute height for your table, but I would encourage you to avoid this option. While this option is supported by browser versions 4 and above in Internet Explorer and Netscape, older browsers may have difficulty registering this specification.

      Border colors and table/cell backgrounds, including table/cell image backgrounds, also are  problematic. Depending upon the specific browser and version, these options are interpreted differently, and sometimes not interpreted at all. In general, you can set table background colors and assume that most current browsers will handle this option satisfactorily; background images are not considered standard at this time, so you might want to avoid them in your use of tables.

       

Step Three: Cell Properties

      You also can set the properties of individual cells, such as absolute size, alignment, and background color. To do this, go to the Tables main menu item, then select the Properties, Cells option:

      The Cell Properties option window looks and functions  very similar to its table counterpart. In this window, you can set cell width, content alignment within individual cells, and cell background colors:

      Note that the Cell Properties window also enables you to define a cell that spans multiple columns or rows. This option will be addressed in the next lesson, Tables, Part 3.

       

Summary

      This lesson outlines how you can set simple parameters for your tables. The next lesson, Tables, Part 3, will look at some advanced layout options and cover potential problems associated with non-standard table properties.

back