Table Editor, SuperTool
Table Editor: Supertool

If you look at the source of most Web pages on the Internet today, they will contain tables. This is probably due to the relative nature of HTML. That is, the HTML language is designed to position objects (images, text etc.) relative to one another. The advantage is content can be fitted to any browser page size. The disadvantage is that the layout of the Web page you design might not look similar on another person’s browser. Tables give you more control of the layout of information on a Web page. The examples mentioned below show you how, step by step, to construct a Web page where the objects in it are placed within tables.

Tip

Try to not have large graphics in a table because the contents of a table will not be displayed until all the graphics are completely loaded.

What do you want to know how to do?

  Start the Visual Table Editor

 Find definitions for the terminology used in defining tables.

 Designing Tables using the Table Editor.

 Using Tables in HotDog.

  Inserting Objects into a Table

  Examples

  Related Topics


Starting the Visual Table Editor

  On the Supertoolz menu, click Visual Table Editor.

If the Supertool is not in the menu, you will need to install it.

  Related Topics


Using the Table Editor in HotDog

There are many ways of creating and editing tables using the Visual Table Editor.

1. 	Start the ‘Table Editor’.

2. 	Enter the number of rows and columns that you want in the window that appears.

See also

  An example of using the Table Editor.

  How to Create a new Table.

  Related Topics


Tables Terminolgy
Tables Terminology

Cell	A single element inside a table. The smallest table must contain one cell.
Row	A row of cells going across the table.
Column	A column of cells runs up and down a table.
Object	An Object is a something that sits in a cell, such as a block of text, an image or a form element.
  Related Topics


Creating a New Table

  On the Supertoolz menu, select ‘Visual Table Editor’.

Using the Visual Table Editor you can create and edit tables (not only their content, but also their look and design).

1	Inside the Table Editor on the file menu, select ‘New’.

2	Enter the number of Rows and Columns you need.

See next

  How to design a table.

  Related Topics


Dropping Objects into a Table

1	To insert an object into a table, move your mouse to the tab bar at the left of the Table Editor.

2	Click on the object you want to insert into a table.

3	While still holding the left mouse button down, drag the object to the cell in the table to where you want to insert the object. Release the left mouse button and the object will be inserted into the table.

Depending on what object you’ve inserted, the properties of the object will now have to be specified. (For example, if you inserted an image object, you now have to specify the location of the image to be inserted).

  To edit the properties of an object in a cell, right click over the object and select ‘Properties’.

Tips

•	To delete an object from a cell, right click over the object and select ‘Delete’.

•	To move an object inside a table, click and drag the object to the correct position.

What objects do you want a description on?

  The text object.

  The URL object.

 FORM elements.

 The image object.

  Related Topics


Text
Text: Inserting into Tables

1	Click and hold the right mouse button over the Text object on the left of the Visual Table Editor.

2	While holding the mouse button down, move the mouse to the cell where you want to insert the text.

3	Release the mouse button.

4	In the ‘Insert Text’ window that appears, enter your the text that you want to appear in the table. You can choose various fonts, text colors and sizes.

5	Click ‘OK’.

What do you want to do?

  Change the font.

  Change the text color.

  Change size of the text.

  Add a heading.

  Change the alignment of text.

  Related Topics


How to Change the Font of Text in a Table

The FONT attribute describes the font of the text displayed in a table. If you leave this option blank, the text displayed in the table is the default font as specified by the visitor’s browser. If you specify a font that a visitor does not have on their own system, the default font is displayed.

To edit the attributes or properties of text:

1	Left click over the text.

2	Select ‘Object’, ‘Properties’.

Click on the ‘Font’ menu and select the new font.

  Related Topics


How to Change the Color of the Text in a Table

To edit the attributes or properties of text;

1	Left click over the text.

2	Select ‘Object’, ‘Properties’.

To change the color of your text, click the color button. Select the color you want your text to appear.

  Related Topics


How to Add a Heading in a Table

Headings are used to automatically make the size and position of some text appropriate for a heading. H1 is the largest heading, H6 is the smallest.

To edit the attributes or properties of text,

1	Left click over the text.

2	Select ‘Object’, ‘Properties’.

Click on the heading you want.

  Related Topics


How to Change the Size of the Text in a Table

This attribute describes the relative height of the text displayed in a table. If you leave this option blank, the text displayed in the table is the default size as specified by the visitors browser.

To edit the attributes or properties of text,

1	Left click over the text.

2	Select ‘Object’, ‘Properties’.

Click on the size menu and select the size you want.

  Related Topics


Form Elements
Form Elements: Inserting into Tables

To insert a form element into the Table editor:

1	Click on the ‘Form Elements’ button in the Table Editor.

2	Select the form element you want to insert into the table.

3	Drag the form element into a table cell.

Tip

Try and have only one form element per cell.

On what form element do you want a description?

Check Boxes    Hidden Fields    Images    Password Boxes    Radio Boxes	Reset Button    Submit Button    Text Box    List or Select Menu    Text Area
  Related Topics


Images, Inserting into Tables
Images: Inserting into Tables

1	Click and hold the right mouse button over the Image object near the top of the table editor.

2	While holding the mouse button down, move the mouse to the cell where you want to insert the image.

3	Release the mouse button.

4	In the ‘Insert Image’ window that appears, enter the location of the image and the various image properties. You can choose different sizes and alignments.

5	Click ‘OK’.

What do you want to do?

  Change an images height and/or width.

  Change the Alignment of an image.

  Change the border around an image.

  Making the image clickable.

  Related Topics


Changing the height and/or width of an image a table

To edit the attributes or properties of the image:

1	Left click over the image.

2	Select ‘Object’, ‘Properties’.

In the image properties window that appears, edit the height and width boxes to insert the image as the desired size.

Note: if left blank the image is inserted as its actual size.

  Related Topics


Changing the alignment of an image in a table

Images can be aligned within a Web page. The options are:

Top	Top of image is flush with the baseline.
Middle	Image is centered vertically on the baseline.
Bottom	Bottom of image is flush with the baseline.
Left	Image is flush with the left margin.
Right	Image is flush with the right margin.

To edit the attributes or properties of the image:

1	Left click over the image.

2	Select ‘Object’, ‘Properties’.

Click on the ‘Alignment’ box and select the alignment you want.

  Related Topics


Changing the Border Around an Image

Images can have a simple border around them. If you make an image clickable , an unpleasant border is drawn around the picture. To remove this border, set BORDER=0 in the images properties.

To edit the attributes or properties of the image:

1	Left click over the image.

2	Select ‘Object’, ‘Properties’.

Change the border attribute as desired.

  Related Topics


Clickable

To make an object clickable is to associate an URL with it.

For example, a clickable image, when clicked, will take the visitor to a new Web page.


Making the Image Clickable

An Image can have an URL associated with it. This means that when a visitor clicks on your image, they are also following a link to another Web page.

To edit the attributes or properties of the image:

1	Left click over the image.

2	Select ‘Object’, ‘Properties’.

In the URL box, enter the URL you want the image to jump to. For example, http://www.sausage.com is a valid URL.

  Related Topics


URL's, Inserting into Tables
URL's: Inserting into Tables

1	Click and hold the right mouse button over the URL object near the top of the table editor.

2	While holding the mouse button down, move the mouse to the cell where you want to insert the URL.

3	Release the mouse button.

4	In the ‘Insert Link’ window that appears, enter the location of the URL’s various properties and enter the links description (i.e., the text a visitor clicks on, the URL (i.e., http://www.sausage.com)) and a target if necessary.

5	Click ‘OK’.

What do you want to do?

  Making text clickable.

  Add a URL.

  Assign a Target to a URL.

  Send your table to HotDog.

  Related Topics


Assigning a Target to a URL

If you are using frames, the target specifies which frame window the Web page should be opened in.

To edit the attributes or properties of a URL:

1	Left click over the URL.

2	Select ‘Object’, ‘Properties’.

In the frames box, enter the frame you want the Web page to open in.

  Related Topics


Choosing a URL

This is the URL (address) of the Web page you want to link to. For example,

http://www.sauasge.com.au is a valid URL.

To edit the attributes or properties of a URL:

1	Left click over the URL.

2	Select ‘Object’, ‘Properties’.

In the URL box, enter the URL you want to link to.

  Related Topics


Deciding what Text to make Clickable

The clickable text is the text a visitor clicks on to load a new web page in to their browser.

For example, this link is clickable .

To edit the attributes or properties of a URL:

1	Left click over the URL.

2	Select ‘Object’, ‘Properties’.

In the ‘Text to Click on’ box, enter the text to click on.

  Related Topics


Editing Table Properties

Tables themselves have many general properties available for you to edit. These properties include size, alignment and color among others. To edit the properties of a table:

1	Right click the mouse over any the table.

2	Select ‘Table’.

3	Select ‘Properties’.

What do you want to do?

  Define the width and height of the table (WIDTH, HEIGHT).

  Align the Table (ALIGN, VALIGN).

  Change the color or size of the border (BORDER, BORDER COLOR).

  Change the background color of a table.

  Change how the cells sit within the table (CELLSPACING/PADDING).

  Change Cell Properties.

  Related Topics


Defining Width and Height of a Table

You can define the minimum width and height of a table. This means that if you insert an object larger than the minimum width or height of the table (say a really large image), then the table will resize to fit it.

The advantages of defining the height and width of a table is that you gain some control over how the table looks. The downside is that you have to become almost meticulous with the size of the objects you place within your table.

To edit the attributes or properties of a table:

1	Left click over the table.

2	Select ‘Table’, ‘Properties’.

In the height and width boxes, enter the dimensions you require.

  Related Topics


Defining the Alignment of a Table

To control the horizontal position of how a table sits in a Web page, the alignment attribute is used. The options are:

Left  	Table is rendered flush with the left margin.

Center  	Table is rendered centered between the margins.

Right 	Table is rendered flush with the right margin.

To edit the attributes or properties of a table,

1	Left click over the table.

2	Select ‘Table’, ‘Properties’.

Click on the ‘Alignment’ box and select an alignment.

  Related Topics


Changing the Color or Thickness of a Border

To edit the attributes or properties of a table:

1	Left click over the table.

2	Select ‘Table’, ‘Properties’.

The border is a frame that is drawn around the entire table. Typically, border values of 0-3 pixels are used, but try experimenting. You can change the color of the border using the Border Color, Border Color Light and Border Color Dark properties.

Border Color Light controls the color of the highlight color of the table’s border.

Border Color Dark controls the color of the 'shadow' or low-light color of the table’s border.

If Border Color Light and Border Color Dark are not set, the Border Color sets the complete color of the border. This is the same as setting Border Color Light and Border Color Dark to the same color.

TIP

If you don’t want a frame in a table, set border = 0.

  Related Topics


Changing how Cells Sit within a Table

Cell padding is the spacing inside a cell. Thus it places a buffer zone of space (in pixels) around any object in the cell. Cell spacing is the spacing between cells. In other words, it will make the frame inside the table bigger.

To edit the attributes or properties of a table:

1	Left click over the table.

2	Select ‘Table’, ‘Properties’.

  Related Topics


Change the Background Color of a Table

To edit the attributes or properties of a table:

1	Left click over the table.

2	Select ‘Table’, ‘Properties’.

Click on the [image] icon next to ‘Background Color’ and select the color that will make up the background color of your table.

  Related Topics


Table Cell Editing

Each cell within a table has many properties and all can be edited from the Table Editor. To edit a cell property;

1	Over the cell you want to edit, right click the mouse.

2	Select ‘Cell’.

3	Select ‘Properties’.

What do you want to do?

  Change the background color of a cell (BGCOLOR).

  Change the text wrapping (NOWRAP).

  Align Objects in a cell (ALIGN/VALIGN).

  Merge or split two cells. (COLSPAN or ROWSPAN).

  Change the cells width or height (WIDTH, HEIGHT).

  Change the color of the frame around the cell (BORDERCOLOR, BORDERCOLOR LIGHT/DARK).

  Insert an object into a cell.

  Related Topics


Changing the Background Color of a Cell

To edit the properties of a cell;

1	Right click over the cell you want to edit.

2	Select ‘Cell’, then ‘Properties’.

To change the background color of the cell, click on the Background Color icon and select the color you want.

  Related Topics


Change the way text wraps within a cell

To edit the properties of a cell,

1	Right click over the cell you want to edit.

2	Select Cell, then Properties.

If you don't want text to be word wrapped in a cell, check this option.

  Related Topics


Changing the Alignment of Objects within a Cell

To edit the properties of a cell:

1	Right click over the cell you want to edit.

2	Select ‘Cell’, then ‘Properties’.

Objects can be aligned inside a cell, both horizontally (ALIGN) and vertically (VALIGN).

The VALIGN property controls the vertical alignment of objects (text, images etc.) inside a cell.

Top 	Content is flush with the top edge of the cell.

Middle 	Content is centered in the cell.

Bottom 	Content is flush with the bottom edge of the cell.

The ALIGN property controls the horizontal alignment of objects (text, images etc.) inside a cell.

Left  	Content is flush with the left edge of the cell.

Center 	Content is centered within the cell.

Right  	Content is flush with the right edge of the cell.

  Related Topics


Changing the Rowspan and Colspan of a Cell

The Rowspan property allows you to span rows as depicted left. The numbers in each cell represent the Rowspan of the cell.

The default value for Rowspan in a cell is 1. The HTML code required to generate the table depicted is:

<TABLE BORDER=1>

  <TR>

<TD>1</TD>

<TD ROWSPAN=2>2</TD>

  </TR>

  <TR>

<TD>1</TD>

  </TR>

</TABLE>

The Colspan property allows you to span columns as depicted left. The numbers in each cell represent the Colspan of the cell.

The default value for Colspan in a cell is 1. The HTML code required to generate the table depicted is:

<TABLE BORDER=1>

  <TR>

<TD>1</TD>

<TD>1</TD>

  </TR>

  <TR>

<TD COLSPAN=2>2</TD>

  </TR>

</TABLE>

To edit the Rowspan and/or Colspan of a cell:

1	Right click over the cell you want to edit.

2	Select ‘Cell’, then ‘Properties’.

Enter the new Row or Colspan.

  Related Topics


Changing the Height and Width of a Cell

The height and width of a cell can be expressed as percentages or pixel values. These values define the minimum height and/or width of the cell.

In particular, using the width option gives you control over how the columns of your table will look. By defining the width of the cells at the top of each column you can define automatically the column width as all cells below the top cell automatically take the top cells width. For example, the following HTML code produces the table below:

<TABLE BORDER=1 WIDTH=200>

<TR ALIGN=CENTER>

<TD width = 20%>20%</TD> <TD width=20%> 20% </TD> <TD width=60%> 60% </TD>

</TR>

<TR ALIGN=RIGHT>

<TD>1 </TD><TD>2 </TD><TD>3 </TD>

</TR>

</TABLE>

To change the height or width of a cell:

1	Right click over the cell you want to edit.

2	Select ‘Cell’, then ‘Properties’.

Enter the new height and width.

Note

The height and width attribute affects all cells within the same row or column respectively. You have to be sure that all the objects you insert into your table fit the space you have allotted them or the height and width attributes become ineffective.

  Related Topics


Changing the Color of a Border around a Cell

There are three attributes that control the color of the border around a cell.

Border Color Light: controls the highlight color of the cells border.

Border Color Dark: controls the color of the 'shadow' or low-light color of the cells border.

Border Color: sets the Border Color Light and Border Color Dark to the same color.

To change the border colors of a cell:

1	Right click over the cell you want to edit.

2	Select ‘Cell’, then ‘Properties’.

Enter the colors you want into the window that appears.

  Related Topics


Table Design

Table Design incorporates the layout, color and size of your table. To change the color and/or size of your table, see table properties below. To change the layout of a table you need to split or merge individual cells.

What do you want to do?

  Change the layout of a table.

  Edit table properties.

  Edit cell properties.

  Related Topics


Table Layout

Using the cell editing functions in the Table Editor you can change the layout of a table. For instance,

This layout is achieved by the progressive merging of cells inside the table.

What do you want to do?

  Add a cell.

  Delete a cell.

  Merge some cells.

  Split a cell.

  Change table properties.

  Change cell properties.

  Related Topics


Adding a Cell

1	Over a cell, right click the mouse.

2	Select ‘Cell’.

3	Select ‘Add’.

If you selected ‘Add Left’, a new cell will be created on the left-side of the cell you originally clicked on.

If you selected ‘Add Below’, the cell will be created below the cell you originally clicked on.

  Related Topics


Deleting a Cell

1	Over a cell, right click the mouse.

2	Select ‘Cell’.

3	Select ‘Delete’.

The cell you selected will be deleted.

  Related Topics


Merging Cells

1	Holding the SHIFT key down and click on two adjacent cells.

2	Release the SHIFT key. Note how both cells are selected.

3	Right click the mouse over either of the cells.

4	Select ‘Cells’.

5	Select ‘Merge Cells’.

  Related Topics


Splitting a Cell

1	Right Click over the cell in the table you want to split.

2	Select ‘Cells’.

3	Select ‘Split’.

4	Choose the direction you want the cell to be split.

  Related Topics


Tables Example 1 - Starting the Table Editor

    Related Topics

Tables are commonly used as a way of laying out information neatly on a Web page. One very common example of a table has been included with HotDog (open the file “tabledemo.html”  in Help/Tutorials directory inside HotDog). You are going to create this table using the Table Editor.

To begin, you must first create the basic table that underlies the Web page. The next 9 steps will guide you through the entire process.

Starting the Table Editor

1	On the Supertoolz Menu, move the mouse to Visual Table Editor.

2	Select ‘Table Editor’.

Note

If the Supertool is not in the menu, you will need to install it.

Tips

If you want to edit a table you have already inserted into HotDog, highlight the table and start the table editor as described above. This will open the table, ready for editing.

    Related Topics


Tables Example 2 - Creating a table

    Related Topics

When the table editor starts it asks you to specify the number of rows and columns. Rows go along the page while columns go up and down.
To create the table on the left, enter 6 rows and 3 columns. In short hand, you are creating a 6x3 table. The layout of this table will then be edited to create an underlying structure for your Web page.

Tips

You can quickly create a table from outside of the Table Editor by pressing the {quick table button} button. Just drag the mouse until you reach the desired table area.

    Related Topics


Tables Example 3 - Changing the Layout of a table

     Related Topics

This is the table layout you will be using for your Web page. To create it you will need to edit your current 6x3 table, merging some cells.

First of all, merge the 2 right most cells on the top row:

1	Holding the SHIFT key down, click on the two cells.

2	Release the SHIFT key and right click your mouse over any of the selected cells.

3	Select ‘Merge’.

Using the same process, merge the center cells. You will have to perform this operation 4 times.

Your table should now look like the one above.

If you want to experiment with adding and deleting cells, do so, but use a simpler table, say a 4x4. Otherwise the results may be confusing. This is to do with the way HTML tables are rendered by browsers.

     Related Topics


Tables Example 4 - Changing the Border Colors

     Related Topics

By right clicking over any part of the table you can change the properties of a table. These properties are:

•	Position of table in a Web page.

•	Color of the table.

•	Thickness of the table’s border.

•	Size of the table.

At the moment, the border between the cells is useful as it displays the layout of the table. Eventually, the table borders can be hidden so as not to distract a visitor viewing your Web page.

One of the biggest problems with Web page design is that the layout of information can look sub-optimal if a visitor runs in a low screen resolution or resizes their Web browser (see tabledemo2.html for an example).

Using tables, there are two ways of tackling this problem. You can set the minimum width of the table to a certain pixel value (such as 640) which fits nearly everyone’s browser. Alternatively, define the width of the table relatively (i.e., 80% of the visitor’s browsers window).

Both methods have their advantages and disadvantages. Perhaps the simplest and effective answer is to define the tables size to 640 pixels.

1	Right click over any part of the table.

2	Select ‘Table’.

3	Select ‘Properties’.

4	In the Table Width Box, enter 640. Make sure the units are in pixels.

The basic table underlying your Web page is now complete. If you want to actually start adding content to your Web page, click

     Related Topics


Tables Example 5 - Inserting a Heading into a Table

     Related Topics

Now start inserting the content of your Web page into your table.

To begin with, insert a heading;

1	Click and hold the right mouse button over the ‘Text’ object near the top of the table editor.

2	While holding the mouse button down, move the mouse to the cell where you want to insert the text.

3	Release the mouse button.

4	In the ‘Insert Text’ window that appears, enter your the text that you want to appear in the table. You can choose various fonts, text colors and sizes.

5	Click ‘OK’.

Tip

To edit text you have already inserted into a table:

1	Over the text in your table, right click the mouse.

2	Select ‘Object’.

3	Select ‘Properties’.

4	Begin editing your text.

     Related Topics


Tables Example 6 - Inserting an Image into a Table

     Related Topics

 Now start inserting pictures into your table. The names of the pictures running down the left-side of the table from top to bottom are pic1.gif, pic2.gif,  pic3.gif, pic4.gif, pic5.gif  - all are in the graphics directory.

Begin by inserting the top left image, ‘pic.gif’.

1	Click and hold the right mouse button over the Image object near the top of the table editor.

2	While holding the mouse button down, move the mouse to the cell where you want to insert the image.

3	Release the mouse button.

4	In the ‘Insert Image’ window that appears, click the ‘Folder’ button [image].

5	Select the image ‘pic1.gif’

6	Click ‘OK’.

As the top left image is usually a company logo or identification, make the image clickable. That is, when a visitor clicks the image it should take them to another part of your site.

To add a URL to an image:

1	Over the image in your table, right click the mouse.

2	Select ‘Object’.

3	Select ‘Properties’.

4	Under ‘Document to Launch’, enter the URL of your document or click the [image] button and select your document.

You will notice that the image has a blue box around it. This box tells the visitor that the image is clickable. However, the context of the image alone is probably enough so if you want to remove the image border, set the border size to zero.

Setting the image border to zero:

1	Over the image in your table, right click the mouse.

2	Select ‘Object’.

3	Select ‘Properties’.

4	In the ‘Border Width Box’, select ‘0’.

To align the image to the center of the cell you will have to adjust the cell properties.

1	Over the cell containing the image, right click the mouse.

2	Select ‘Cell’.

3	Select ‘Properties’.

4	For horizontal and vertical alignment, select ‘Center’.

Now insert all the other images into your table. Ultimately, the images running down the left of the Web page will be used for a tool bar. This tool bar will be guide a visitor around your Website.

     Related Topics


Tables Example 7 - Inserting a URL into a table

     Related Topics

To insert an URL into a table:

1	Click and hold the right mouse button over the URL object near the top of the table editor.

2	While holding the mouse button down, move the mouse to the cell where you want to insert the URL.

3	Release the mouse button.

4	In the ‘Insert Link’ window that appears, enter the location of the URL’s various properties and enter the link’s description. (i.e., the text a visitor clicks on, the URL (i.e., http://www.sausage.com) and a target, if necessary)).

5	Click ‘OK’.

To change the properties of any URL you have already inserted:

1	Over the URL you inserted, right click the mouse.

2	Select ‘Objects’.

3	Select ‘Properties’.

4	Make any changes to the URL.

To change a URL that is associated with an image:

1	Over the image you inserted, right click the mouse.

2	Select ‘Objects’.

3	Select ‘Properties’.

4	In the ‘Document to Launch box’, change the URL.

     Related Topics


Tables Example 8  - Changing cell properties

     Related Topics

You can change the alignment of an object (e.g. text, image etc.) inside a cell.

For instance, to right justify a text block:

1	Over the text block, right click the mouse.

2	Select ‘Cell(s)’.

3	Select ‘Properties’.

4	Select a horizontal alignment of ‘Right’.

     Related Topics


Tables Example 9 - Deleting an object

      Related Topics

To delete an object (e.g. text, image etc.) from inside cell:

1	Right click the mouse over the cell.

2	Select ‘Object’.

3	Select ‘Delete’.

      Related Topics


Tables Example 10 - Inserting the Table into HotDog

   Related Topics

When you want to insert the table into HotDog, click the [image] button.

To exit the table editor, on the file menu click ‘exit’.

You should now see the table you have created in ROVER.

   Related Topics