> Overview
 > Creating a New
    Web Page
 > Making and
    Editing Objects
 > Creating and
    Editing Tables
 > Publishing your
    Page on the Web
 > Additional Features
    of the Software


 
 
 Tables


Learning to use tables is an essential tool in order to become a good web designer and to create more organized web pages. A table is a way of separating an area of your web page into sections or parts. These parts can then be made and edited individually from the rest of the page and from other sections or parts within the same table. The way a table works is that it covers an area of your page and splits that area into a number of rows and columns. By splitting the table into both columns and rows you split the area into small blocks, or cells. The width of cells are the widths of the columns and the height of these cells are the height of the rows. To give an example of a table:

This table has two rows, three columns, and six cells. If we decided to add a new row to the bottom of the table there would be three rows, three columns, and nine cells. With each cell you are able to make changes that are separate from all other cells(e.g. background color, centering of text within cell). The whole table holding all the cells can be edited as well as each individual cell. To get a better understanding of tables and what they are used for you can go through this tutorial. This section is used to show you how to create tables using Microsoft FrontPage. Listed here is what will be included:

i. Creating a Table
    a. Editing a table
    b. Editing cells


i. Creating a Table
- back to top

There are two ways to create a table:
  • Select Table from main menu, then select Insert, then select ' Table...'

  • Doing so will bring up this window:


    After this opens, you specify how you want your table to look. Enter the number of columns and rows you want your table to contain. Set your width of the table (each column will have a distributed even width to the width you set for the entire table). The height of the rows will always be about 10 pixels in height (Frontpage puts a spacing character directly in the row to keep this height) until changed later. Then you choose the layout of your table. In the alignment drop down menu, you can set how the whole table will be aligned on the page. Then set the border to a size (in pixels). The borders for a table include borders between cells as well as the border surrounding the whole table. Cell padding is the spacing you want between the contents of that cell and the border of that cell, similar to margins on a page only for your individual cells. Cell spacing is spacing you want between cells in a table. Making a larger cell spacing, will create more spacing in between each cell.

    The table in this case would look like this on a web page:



  • Another way to create a table is to use the table icon in the standard toolbar, click this button, and after moving the mouse down some you should see:


    This allows you to create a table with a number of columns and rows depending how many boxes you select(turn blue when selected). In this instance there are going to be 4 columns by 3 rows because it is selected 4 boxes wide and 3 boxes high. Each box in the horizontal/width direction represents a column, while each box in the vertical/height direction represents a row. Once you have selected the number of columns and rows, just click to create the table.

    Using this example our table will look like this:



    As you can see the table is created with 4 columns, 3 rows, and a total of 12 cells. Now we can edit the options of our table to better suit our page.


ii. Editing a Table
- back to top


When editing a table you can edit the properties of the entire cell as well as the properties of each individual cell. First we will discuss the properties of the whole table.

To edit table properties:

  • Click anywhere in your table, in any cell
  • Go to 'Table' in the main menu then select Table Properties, then select Table
  • or
    Right click anywhere in the table and select Table Properties.
The Table Properties window will now appear:


Here you can change the layout, borders, and background of your table. In the layout portion, you can specify how you want the whole table to be aligned on your page, how it floats around text, the width and height of table, and the size of cell padding and spacing. Just to recap, cell padding is the spacing between the content in a cell and the border of the cell, while cell spacing is the spacing in between cells in your table. Set the width and height of your table in pixels or percent.

*Note - If you decide to use percent to specify the height and width of your table and your table is not within another table, you must remember that the percent size is in percent size of the viewing page. The size of viewing pages can be different when viewed from different resolutions(e.g. 800x600, 1024x768). This changes the size of the window and if your table is set to percent, it may come out with different results than expected when looking at it through a different resolution.

Next are the borders of the tables. Change the borders to the size and color of your choosing. Choosing colors for the light and dark borders will over ride the overall color for borders if one was already chosen. Clicking the option 'Show both cells and tables borders' will create borders around the cells as well as the standard table border.

Last is the background of the table. Choose a color if you want to change the background color of the entire table or upload a saved image from your computer you wish to use as the background of your table.


Adding, Modifying, and Removing Cells


After creating a table, it is possible to add new columns and rows to it.


Adding


To insert a new row or column:
  • Select within a cell adjacent to where you want to make a new row or column
  • Go to Table in the main menu, then to Insert, then select 'Rows and Columns'


  • A window will appear:


    From here you can choose how many rows or columns you want to add, with respect to the cell you are selected in. Select how many rows you wish to add above or below your selection, or select how many columns you wish to add to the left or to the right of your selection.

    or

  • Right click within a cell in your table. In the right click menu choose the option 'Insert Rows' or 'Insert Columns'. If you choose Insert rows, it will insert a row above the row you currently have your cursor in. If you choose Insert Columns it will insert an extra column to the right of the column your currently selected.

  • *Tip - Pressing the Tab key in the last cell of the last row will automatically add another row to the table.

Modifying

You can modify cells by deciding to change a group of cells into a single cell or split a single cell into a group of cells.


To merge a group of cells into one single cell:
  • Select a row of cells. This is done by first placing the mouse cursor on the left edge on the table and next to the row you wish to select. If your mouse is in the correct position, you will see a small black arrow, click while seeing this arrow and you will select the row. Or click anywhere in the row and go to Table in the main menu, then choose select, then click row.
  • With the row now selected, right click and select merge cells
    or
    select Table from main menu then select merge cells
    or

    select the merge cells icon from the tables toolbar
All the cells in the row will now become one single cell.


To split apart a cell into smaller cells:
  • Select into the cell you wish to split into smaller cells
  • Right click into the cell and select Split Cells
    or
    select Table from the main menu then select split cells
    or
    select the split cells icon from the tables toolbar


  • ( A window will now appear, depending on which way you want the cell to be split )

  • Select whether you want to split the cell into columns or rows then enter how many cells you want the current cell to be split into.
The cell you selected will now be split into smaller cells.


Removing Cells


To remove individual cells:
  • To select only one cell, click into the cell you want to delete, then go to Table in the main menu then click select, then Cell. Or you can select multiple cells by clicking into one cell, holding the shift key, then clicking other cell(s) to add them to your selection. You can also select the entire row of cells for removal by selecting the row.
  • Go to Table in the main menu, then click delete cells to remove the cells
    or
    right click over the selected cells and select delete cells
    or

    select the delete cells icon in the table toolbar

iii. Editing a Cell
- back to top


To edit a cell:
  • Select the cell you wish to change
  • Right click into the cell and select cell properties
    or 
    select Table in the main menu, then table properties, then click cell
These options are generally the same as editing the properties of a table. The main differences are the options of 'horizontal and vertical alignment', as well as the 'rows and columns spanned' options. The horizontal refers to the alignment of the content within the cell in regards to the horizontal or width direction. The vertical refers to the alignment in the vertical or height direction. The rows and columns spanned options specify how many columns or rows a cell spans(if the rows span is set to three the cell will span over every three rows).

Copyright © Matthew Walker 2005. Windows Logo and Microsoft FrontPage Logos are registered trademarks of Microsoft Corp.