[Administration]
[Schools]
[Programs]
[Information]
[Lifelong Learning]
[Searching the 'Net]
[www.MCCSC.edu Menu]

Using Table in Word 97
to Create an HTML Webpage

  1. Open a new, blank document in Word 97 and select Table from the Windows MenuBar.
    [Switch back and forth between Word 97 and this browser page by using the TaskBar at the bottom of the screen or by using the [Alt+Tab] keystroke combination to choose from the active applications.]
  2. You will be offered a selection of creation choices including:
    • Draw Table
    • Insert Table

Draw Table   will give you a "pencil" icon that you use to sketch out the Table on the page. This is cumbersome and touchy for users unfamiliar with the process and the expected product.
Insert Table   opens an interactive dialog that allows you to choose the number of columns and the number of rows.

Scroll down to the instructions for Using Insert Table.

The MCCSC Learning Network subscribes to Policy and Guidelines 2521 of the Monroe County Community School Corporation. Links contained on these pages to information or other organizations are presented as a service and neither constitute nor imply endorsement or warranty.
© 1998 MCCSC. Comments/Questions: Webmaster. Last update: 5 November 1998.

www.MCCSC.edu Menu | | Administration | | MCCSC Schools | | MCCSC Programs | | Information | | Search Tools

Using Insert Table

Before proceeding, take a look at Carl Zager's web site in three different views. Return to this page by using the "Back to" function of your browser. You may move back and forth between this page and those pages by using the "Back to" and "Forward to" functions.

  1. The "public"/displayed page, that uses the Table structure for organization of the output -- but which does not display the border lines
    www.mccsc.edu/~czager/
  2. A view of the page with BORDER=1 and with images disabled and replaced by the ALT=description that appears when the image is not displayed
    www.mccsc.edu/~czager/pages/borders.html
  3. A view of the page with BORDER=1 and with images enabled
    www.mccsc.edu/~czager/borders.html

Notice that the page is a single table. It has 2 columns -- column 1 is approximately 2/3's the width of the table and column 2 is approximately 1/3 of the table width. It has 6 rows -- the depth of each row is determined by the size/amount of text or graphics in each row.

Using Table / Insert Table, insert a table into a blank Word 97 document that has 2 columns and 6 rows. Switch back and forth between Word 97 and this browser page by using the TaskBar at the bottom of the screen or by using the [Alt+Tab] keystroke combination to choose from the active applications.

empty

empty

empty

empty

empty

empty

empty

empty

empty

empty

empty

empty

As you type information in each box, the size of the box will expand in depth or height to accommodate the information.

CARL ZAGER image across columns 1 and 2

empty

Personal

COYOTE image
and Hillerman quote
down across 2 rows

Hobbies and Interests
with NASCAR image

empty

Places
with LITTLE TRAIN image

OLD RED image

C:DOS ditty across columns 1 and 2

empty

Information
Addresses
and Navigation Bar

e-mail information

Notice that there are still "empty" cells in column 2, rows 1, 3, and 5.

The Table command contains options to

    • Merge Cells
    • Split Cells

depending on whether a single cell or multiple cells is/are highlighted.

  1. With your mouse, select both cells in row 1.
  2. Select Table / Merge Cells.

Cells 1 and 2 in row 1 now span across columns 1 and 2. Repeat this for rows 2 and 3, column 2:

  1. With your mouse, select both cells in column 2, rows 2 and 3
  2. Select Table / Merge Cells.

Repeat for row 5, columns 1 and 2:

  1. With your mouse, select both cells in row 5.
  2. Select Table / Merge Cells.

CARL ZAGER image across columns 1 and 2

Personal

COYOTE image
and Hillerman quote
down across 2 rows

Hobbies and Interests
with NASCAR image

Places
with LITTLE TRAIN image

OLD RED image

C:DOS ditty across columns 1 and 2

Information
Addresses
and Navigation Bar

e-mail information

You can now begin to format and position the text within each cell:

  1. To emphasize (bold or italic) text, highlight "Personal" (or your words) and select the B-Bold icon or use Format / Font / Font Style / Bold (or I-Italic icon or use Format / Font / Font Style / Italic) from the MenuBar.
  2. To adjust the alignment of text within a cell, without changing the highlight, select the Align-Right icon (or the Format / Paragraph / Indents and Spacing / Alignment and select Left, Right, Center, or Justified, as well).
  3. Change the typeface from Courier to Comic Sans MS (or to a typeface of your choice) in the same manner.
  4. To increase or decrease the font size, highlight "and Hillerman quote" (or text of your choice) in row 2, column 2, change the Font size to a smaller number (12 to 10 or 10 to 8, for example). This can be done from Format / Font / or from the Font Size icon on the ToolBar.
  5. To change the color of text, highlight the text, select Format / Font / Font / Color. In the example below, "e-mail information" has been changed to "yellow."
  6. To change the background color of a given cell, position your cursor in the cell. Click once to select the cell. Select Format / Borders and Shading -- and select the Shading tab. You will find specific colors in the "Fill" section. Select a color, the dialogue box will state the color in text, and the"Preview" panel will echo your choice. You may varying the "Patterns / Style" from "Clear" through "Solid -- 100%" down to 5%. Experiment with these. In the example below, the "e-mail" cell has been shaded "dark red."

CARL ZAGER image across columns 1 and 2

Personal

COYOTE image
and Hillerman quote
down across 2 rows

Hobbies and Interests
with NASCAR image

Places

with LITTLE TRAIN image

OLD RED image

C:DOS ditty across columns 1 and 2

Information
Addresses
and Navigation Bar

e-mail information

To vary the width of each column, position your mouse on the divider line between columns 1 and 2 until the cursor turns into 2 side-by-side arrows. Select with the left button and drag the divider to the right.

To insert art, photos, or audio/visual files into the Table, position your cursor in the appropriate cell -- row 1-col 1 for the CARL ZAGER image, for example -- and select Insert / Picture / From file from the MenuBar. Locate the appropriate directory, folder, or floppy location and select the file to be inserted. Be sure to delete any "notes" or "comments" you made as you were designing the layout -- "CARL ZAGER image across columns 1 and 2", for example.

Important Note: Depending upon the size of the row/column of the cell, the image may "snap" in outside the cell / table. If that occurs, use the mouse pointer to resize the depth and/or width of the cell to match the image, and then "grab" the image (one left mouse click-and-hold) and drag it into the appropriate cell.

Repeat for each image or file you wish to insert into the Table.

In addition to the "Insert / Picture / From file" option from the MenuBar, you can also use Insert / Picture / AutoShapes ... or ... / WordArt. The above "Important Note:" applies to these as well. These effects are NOT illustrated in this tutorial.

Personal

Coyote is always out there waiting,
and Coyote is always hungry.
-- Tony Hillerman, Coyote Waits

Hobbies and Interests

Places

C:\DOS...C:\DOS\RUN...RUN DOS\RUN

Information
Addresses
and Navigation Bar

e-mail information:
czager@mccsc.edu

To create "hyperlinks" from your page to other locations, highlight the word, words, or image that will be the "selection point." In the example above, highlight the word "Coyote" in column 2. Select Insert /Hyperli nk from the MenuBar. In the dialog box, type the URL for the remote page:
www.canismajor.com/dog/coyote.html

Word 97 will create a colored, underlined "selection point" as Coyote above.
The URL for an e-mail link -- such as czager@mccsc.edu -- needs to start with "mailto:" as in mailto:czager@mccsc.edu

You may, if you wish set the background color of the whole page to a color other than the white of a word-processed document. Select Format / Background from the menu bar, and choose a color or an effect from the dialogue box. Be careful. Check the effect of the color against your text colors, your cell colors, and your images. Adjust any of those variables until you are satisfied.

One last step in creating a border-less table for webpage display is to use Table / Select Table from the MenuBar, and, with the table highlighted, use MenuBar Format / Borders and Shading / Borders / None from the options.

Personal

 

 

Coyote is always out there waiting,
and Coyote is always hungry.
-- Tony Hillerman, Coyote Waits

Hobbies and Interests

Places

C:\DOS...C:\DOS\RUN...RUN DOS\RUN

Information
Addresses
and Navigation Bar

e-mail information:
czager@mccsc.edu

When you have completed your page -- text, graphics, and links -- select File / Save As HTML from the MenuBar and direct the file toward the directory, folder, or floppy where you wish your work to be saved.

You may view the results in the Internet browser -- Netscape or Internet Explorer -- through the File / Open Page / Choose File or the File / Open / Browse options in the MenuBars of the browsers.

To "publish" the file as a World Wide Web website, the *.html text file, the *.gif, *.jpg image files, and the *.wav or other format AV files need to be transferred from your local computer to the Monon webserver computer. This is done with FTP, explained in the article "Using FTP" at
www.mccsc.edu/~czager/pages/howftp.html


www.MCCSC.edu Menu
Administration | | MCCSC Schools | | MCCSC Programs
Information | | Search Tools