 |
Table Uses
On web pages, tables can serve many functions:
- Page layout
- Displaying information in formatted tabular form
- Adding background color and borders to blocks of text
Creating a Table
A quick way to create a small table is using the table button
on the standard toolbar. Click the button and drag the mouse over
the grid, highlighting the cells that should appear on the table.
When the table size has been selected, click the mouse button again.
![[Creating a Table example]](images/tablebutton.gif)
A table outline with 2 rows and 2 columns will appear on the page:
![[Empty table]](images/table1.gif)
Table Properties
Select Table|Properties|Table from the menu border to modify
the table's properties.
- Alignment refers to the table's position on the page,
not the alignment of the text within the table. Choose "Center"
to center the table on the page, or select left, right, or justify.
Default is usually left alignment.
- Cell padding is the number of pixels between the text
and the cell walls.
- Cell spacing is the number of pixels between the table
cells.
- Specify width sets the width of the table by a distinct
number of pixels or by a percentage of the screen width.
- Specify height is usually not necessary to set since
the height depends on the number of rows in the table.
The following table was produced by the settings shown in the
window above.
- Border size indicates the depth of the table border.
The dotted lines on the table above are shown only as a visual
reference of the table structure, but since this table's border
is set to 0 pixels, no borders will show on a web page:
Below is the same table with a border set to 5 pixels:
- Border color will change the color of the borders on
the table. The MSIE and Netscape browsers read this property differently.
MSIE changes all the border to the solid color, while Netscape
keeps the three-dimensional quality of the table and only changes
the outer border of the table. Since FrontPage is a Microsoft
product, you will always see the MSIE version when constructing
a web page in FrontPage.
Microsoft Internet Explorer 5.0 |
Netscape Navigator 4.7 |
![[table example]](images/table-ms1.gif) |
![[table example]](http://www.fgcu.edu/support/office2000/frontpage/images/table-ns1.gif) |
- Light border and dark border change the highlight and
shadow colors of the table. Be aware that these attributes are
not read by Netscape. Light and dark borders of red and green
were added to the table, but notice that the Netscape table is
still blue:
Microsoft Internet Explorer 5.0 |
Netscape Navigator 4.7 |
![[table example]](http://www.fgcu.edu/support/office2000/frontpage/images/table-ms2.gif) |
![[table example]](images/table-ns1.gif) |
- Background color adds a background to the table cells.
MSIE will add the color to the background of the cells and the
space between the cells while Netscape only adds the color to
the background of the cells:
Microsoft Internet Explorer 5.0 |
Netscape Navigator 4.7 |
![[table example]](images/table-ms3.gif) |
![[table example]](images/table-ns3.gif) |
- Use background picture will add a background image to
the table and again, there are differences between browsers. MSIE
will repeat the image over the entire background of the table
while Netscape repeats the image in each cell:
Microsoft Internet Explorer 5.0 |
Netscape Navigator 4.7 |
![[table example]](images/table-ms4.gif) |
![[table example]](images/table-ns4.gif) |
Cell Properties
Select Tables|Properties|Cell from the menu bar or Cell
Properties from the shortcut menu to change the properties of
the table cells. Begin by highlighting the cells whose properties
will be changed.
![[Cell Properties window]](images/cellproperties.gif)
- Horizontal alignment is defaulted to the left side of
the table cell. Change this attribute to center or right-justify
the text within the table cell.
- Vertical alignment is defaulted at middle as shown in
the example below. Since the text in the right-hand column cover
more than one line and the left-hand cells do not, that text is
centered vertically in the cell. Select "top" or "bottom"
to override this default setting.
- Setting rows spanned and columns spanned is better
achieved by a method explained below.
- Specify width and specify height will set the
width and height of the cells. Percentages refer to the portion
of the table, not a percentage of the entire screen.
- Select Header cell to automatically bold and center the
content of the cell.
- Border color is a setting that is not read by Netscape.
This changes the color of the cell border only when viewed with
MSIE. Note the red borders on the cells in the top row of the
MSIE example:
Microsoft Internet Explorer 5.0 |
Netscape Navigator 4.7 |
![[table example]](images/table-ms5.gif) |
![[table example]](images/table-ns5.gif) |
Light and dark border settings will additionally be read by MSIE
but not by Netscape.
- Background color changes the cell's background color.
In Netscape, this is the same effect of setting the entire table's
background color since the color is not added between the cells.
Microsoft Internet Explorer 5.0 |
Netscape Navigator 4.7 |
![[table example]](images/table-ms6.gif) |
![[table example]](images/table-ns6.gif) |
- Background image adds a graphic to the background of
each cell. In Netscape, this is the same effect as setting the
background graphic for the entire table since it begins a new
repeating pattern for each cell.
Microsoft Internet Explorer 5.0 |
Netscape Navigator 4.7 |
![[table example]](images/table-ms7.gif) |
![[table example]](images/table-ns7.gif) |
Inserting Rows and Columns
Quickly add rows or columns to a table by placing the cursor in
the cell the new row or column will be adjacent to, right-click
the mouse to access the popup shortcut menu, and select Insert
Row or Insert Column. Another method is to use the Insert
Rows or Columns dialog box:
- Place the cursor in a cell where the new row or column will
be adjacent to.
- Select Table|Insert|Rows or Columns from the menu bar.
- To insert a row, select Rows and enter the Number
of Rows. Then select the Location of the new row by
selecting Above selection or Below selection from
where you placed the cursor in step 1.
- Click Columns to insert a new column and the choices
will change. Enter the Number of columns and the Location
left or right of the selected point.
- Click OK.
Spanning Cells
There is often the need to create a cell than spans rows or columns,
such as the a title at the top of a table. This example will begin
with the same table already used on this page.
- Insert a new row to the top of the table.
- Type the text of the row that will be spanned across the columns
by typing into the first cell and highlight the cells as shown
below:
- Select Table|Merge Cells from the menu bar or right-click
with the mouse and select Merge Cells from the popup shortcut
menu..
- Center the text in the cell by from the Cell Properties
window and deselect the cell.
- To split the cell again, select the cell and choose Table|Split
Cell from the menu bar.
|
 |