Building a Web Site Part II
Working with Tables

What is a table?

A "table" is a grid of rows (across) and columns (down) used to organize information in a web page.  Just as a list can be used to set several items apart from paragraphs of text, a table can make items stand out.  But it can also do so in less space by allowing multiple columns.  Here are some tips for creating tables using FrontPage Editor.  Of course, for a complete coverage of the topic of Tables, may we suggest a tablecloth?

How do I make a table?  (method 1)

Make a table by selecting "Insert Table" from the Table menu - click and drag the mouse across and down on the "table graphic" which appears to indicate the number of rows and columns desired.  Another way to do this is by clicking the "Insert Table" button on the tool bar or A dialog box will appear - enter the number of rows & number of columns.  Click "OK".  Note some of the additional menu choices allow us to "select" cells, rows, columns for editing - these will come in handy later.

An alternative method for placing a new table in a page is described below.

 tablemenu.JPG (6125 bytes)

top of page

How do I make a table?  (method 2)

Draw a table using the menu choice allows us to specify the dimensions (width and height) using a pencil-like tool.  Select "Draw Table" and drag from the upper left corner of the desired location for the table to the lower right corner.  A single cell table appears.  Then, use other choices under the Table menu to modify the table by adding row and/or column divisions within the defined boundaries for the table.  This is a great technique when you have a good idea what the table should look like and don't want to guess how many pixels wide to make it, etc.

top of page

How do I edit a table?

Get rid of a table after first clicking someplace on the table with the mouse.  Choose "Select Table" from the Table menu.   Hit the Delete button or select "Cut" from the Edit menu.

Customizing overall dimensions may be done by selecting "Table Properties" from the Table menu while the desired table is active (the cursor is in the table or part of the table is highlighted).  A dialog box appears (this also appears when using the first method above for creating a new table).   It is possible to specify table width as a fixed number of pixels or as a percent of the screen width.  Also, width of borders, spacing around cell contents, etc. are adjustible here:

tableprop.JPG (21564 bytes)

Customizing column width within a table is easy in FrontPage.   Select the table.  Move the mouse over the bar separating two columns and the mouse changes to a left-right arrow.  Click and drag to widen or narrow.

top of page

Merging two cells

Merging 2 cells (or more than 2 cells) may be done by selecting the cells to be merged and then choosing "Merge cells" from the Table menu.  The results will be different when Deleting a cell from a single row.  Instead of a wider space for the remaining cells, an empty, unsuable space in the table will result.  See the sample at right.
This is the percentage width cell. Text is vertically aligned.
This is single cell which results from merging two cells. A cell has been deleted next to this one.

top of page

Additional features:

Sometimes it is desirable to have one row of entries in a table act as headings for the columns.  This creates cells with automatic heading formatting (centered, bold).   Notice that the Table menu allows us to insert a new row, column, or cell if we decide to change the dimensions of the table.

Finally, a table may be made invisible (a technique used to allow a table to organize text and graphics with greater control) by making the border size = 0 in the Table Properties window.

top of page

Putting Tables to use:

Tables are used in four different ways on this page. 

  • At the top, the index of topics is arranged in a table - a rather mundane and typical use of a table. 
  • Under "How do I make a table?" there is a table that is used to allow some text to be displayed beside a graphic and control such formatting features as left/center/right justification, amount of margins or space between text and graphic objects, etc. 
  • The "Merging two cells" content is a two-cell table with text in the left cell.  The right cell is another table.  The table on the right has visible border lines and shows how cells may be merged or deleted from a table.
  • Finally, the entire content of this page is contained in a single-cell huge table.  It has been set to a width of 580 pixels.  Smaller screen displays are 640 pixels wide and with about 60 pixels for a scroll bar, that means that these smaller screens will display in EXACTLY the same way as on larger screens.  The table is centered so margins appear for the extra space on the left and right side of the table.

Tables are the key to arranging content on web pages - controlling page layout.  Anytime we plan a new web page or web site, we should always create a sketch or storyboard of what we want the content to look like BEFORE we sit down at the computer to create or edit the page.   As the page layout is planned, plan how tables will be used to facilitate arrangement of the content of the page.  PLAN AHEAD!

top of page

Assignments for Module 2: 

Plan a page's layout utilizing one or more tables to control the arrangement or layout of text and graphics.  This could eventually be a page in your final project.   Save the page in a folder named with your last name (in lower case letters).   Remember that whatever you create can be modified later if need be.  After getting a page created as assigned, you are ready to publish for the first time on the Internet.  If you haven't checked it out, go now to the resource for publishing your work with FrontPage. 

This site copyrighted (2005) by Dr. Blake West - Please credit when linking to the site!
Kansas NEA - 715 SW 10th Ave.  Topeka, KS  66612.