Please take a second out to visit our sponsors. Thanks.

WA's MS FrontPage 97 Tutorial



JK Help Forum
Having trouble with anything? Visit our help forum to get the answers you need.

Jump to...
-Tutorial Index
-JavaScript Tutorials
-Web Tutorials
-Free JavaScripts
-Free Java Applets

Low cost, high quality web hosting!
Click here for low cost, high quality web hosting!

Link to us!
We always welcome and appreciate links back to JavaScript Kit. Click here for details.


FrontPage Tutorial 2 (Page 2 of 2)

Basic Tables | text in tables

Step 4: (basic table insertions) Tables are used to organize small chunks of text. A table within a table is called a cell. Tables are used to list items in adjacent form, among other things. Deeper usage of tables include using them as columns to manipulate the whole layout of a page. (all pages in this site use tables as columns). We will discuss usage of columns in tutorial 4. But now, lets first learn the basic usage of tables. To create a table, click either the Insert Table button (or Table, than Insert Table on menu bar). Now, there are three main controls:
: Allows you to create rows/columns.

Rows=2 Columns=1


Rows=1 Columns=2

Controls format of table.






2)-Border Size: Controls the.width of the border of a table. All tables above have Border Size of 1.

Border Size of 5

3)-Cell Padding: Controls the space between the table text and the table border. (Used less than the other options).

Cell Padding of 15. Note the padding of wall!

4)-Cell Spacing: Controls the space between one cell and the other. This is used to control how far apart you want each adjacent cell to be.

Cell Spacing=10  


Cell Spacing=2  

Cell Spacing is very useful when you want to use tables as columns. (like this page). More of this will be discussed in Tutorial 4.

Width: Controls the length of a table.
The Specify Width option will allow you to manually control the table length if you check it. If you don't check it, the length of the table will be long as what you decide to type into it. Now, the Width is measured in two ways
.. In Pixels: An actual way of defining length. (like cm, meters ).


In percent: Controls the length of a table in terms of percentage. (I know, you want some clarification). Ok, here goes: The keyword to remember is that the table you're defining in percentage is always defined in terms of what's outside the table, what's outside the table being 100%, so the percentage is defined relatively.

When you only have one table on a page, the full length of the page is considered to be 100%, so a table of 50% would cover 1/2 of the page.

This is a page.


However, when you have nested tables: tables within a table, 50% isn't the same length as the above example.

This is a page.


So remember, percentage is defined relative to what's enclosing the table.

So lets quickly whip up a table listing some hot links.

<------------------------This is a page:-------------------------->
Welcome to my page: Click below for some hot links!

Pay close attention to how the tables are implemented: There is a inner table within the main table.

Hot Links! This is Table A (The brown table)
<----------Table A's defined in pixels=
Alignment: Center

The above is Table B.
<-----Table B's defined in percent=
(90% of Table A)
Each cell is defined to be roughly
(33% of Table B)

Step 5: (Text formatting within tables) You can, like any text, center, left, or right align text in a table. Here's how: Like always, first create a table. Now right click anywhere within the cell , and select cell properties. Now, at the upper left corner of the box, you see the layout section. Let's break it down!

Horizontal Alignment: This controls the text alignment horizontally (Hay, you're just re-wording it!) Ok, H alignment is your usual text alignment...I'll explain with tables:

This is H left alignment...(V=middle)
This is H centered
This is H right alignment

Vertical Alignment: This controls the text alignment vertically...for example

Where as this is H centered.

This is V middled


H alignment is used more often than V alignment.
You can, of course , use V and H alignment in conjunction. ie: selecting V centered and H centered will center the text to be in the very middle of the page.




Please take a second out to visit our sponsors. Thanks.
CopyRight 1997, 1998 JavaScript Kit. NO PART may be reproduced without author's permission.