Tables

HoTMetaL PRO provides a convenient table editor to graphically edit tables. Tables are often used for formatting effects. For example, a table with one row and two cells filled with text side by side could be used to create the effect of two columns on a Web page. Similarly, names of items and text describing an item can be put side by side. Please use table effects with caution, as not all Web browsers support all features of the current table model. There should always be text-based alternatives to complex table formatting, and uncommon table attributes (such as background color) should be used with caution.

Inserting a table

You can insert a table by clicking on the toolbar button or by choosing the Insert Table... command in the Tools menu.

This gives you a dialog box that lets you specify many different table options:

The [Insert] button in this dialog box will be grayed-out if it is invalid to insert a table at the current insertion point.

• Rows and Columns: the number of row and columns in the table.
• Border: the lines that form the boundary of each table cell when the file is displayed in a browser. You can choose a numerical value, which specifies the border in pixels, or `BORDER' (causing the browser to draw the default border). You can choose your selection from a drop down list or enter it manually in the text entry box provided. The table border corresponds to the BORDER attribute of the TABLE element. Note that some browsers do not draw borders around empty table cells.
• Align: tables can have left, right, or center alignment. You can make your choice from the option menu. Table alignment corresponds to the ALIGN attribute of the TABLE element. Not all Web browsers support this feature, so use it with caution.
• BGColor: Some browsers let you set the background color of a table. Click on [Choose...] to bring up the color menu. The color you select will be expressed as a hexadecimal red-green-blue value. The color of the background of the table will change in the HoTMetaL PRO window to reflect your background choice. The background color corresponds to the BGCOLOR attribute of the TABLE element.
• Width: you can specify the table width as an absolute number of pixels or a percentage of the document width. The width corresponds to the WIDTH attribute of the TABLE element. You can set the width for table cells as well.
• You can specify the Cell padding (space between the cell border and the text) and Cell spacing (space between cells) in pixels. These correspond to the TABLE element's CELLPADDING and CELLSPACING attributes, respectively.

All of the properties described above can be set for an existing table by putting the insertion point inside the table and choosing Table Properties... from the Tools menu.

There are several other less common table properties that can be set by editing the attributes of the table. Place the insertion point to the right <TABLE> start-tag and choose Element Attributes... from the Markup menu. The attributes you can change are:

• NOWRAP: text will not wrap in table cells if this feature is turned on. This can create some very large table cells that scroll off the Web browser's window, so use this feature with caution.
• BORDERCOLOR, BORDERCOLORLIGHT, BORDERCOLORDARK: set the color of the border, or, for 3D-style borders, set two different colors for the `light' and `dark' areas of the border. Not all browsers support these attributes.
• VALIGN: sets the vertical alignment of all cells in the table to top, middle, or bottom.
• HEIGHT: sets the height of the table in pixels or in percentage of the document height.

All tables in HoTMetaL PRO will be the same width as the document window.

Note: You can move to the next cell (horizontally or vertically) using the arrow (cursor) keys.

Properties

The properties described in this section will affect how the table is displayed in a browser, depending on the browser's capabilities.

The Cell Properties... command in the Tools menu lets you set properties for an individual cell.

The Row Properties... command in the Tools menu lets you set properties for an entire row.

Vertical alignment

The vertical alignment specifies whether a cell's content is aligned with the top, middle, or bottom of the cell. Vertical alignment can be set for a particular cell or row: a setting for a cell takes precedence over a row setting. To set the vertical alignment:

• Put the insertion point inside the cell or row whose vertical alignment you want to set.
• Choose Cell Properties... or Row Properties... as appropriate.
• Make a choice from the Vertical Alignment option menu.
• Click on the [Apply] button.

Horizontal alignment

Horizontal alignment (justification) specifies how the text in a table cell is aligned with the sides of the cell. Your choices are left, right, centered, and justify (that is, aligned on both sides). Horizontal alignment can be set for a particular cell or row: a setting for a cell takes precedence over a row setting. To set the vertical alignment:

• Put the insertion point inside the cell or row whose horizontal alignment you want to set.
• Choose Cell Properties... or Row Properties... from the Tools menu, as appropriate.
• Make a choice from the Horizontal Alignment option menu.
• Click on the [Apply] button.

Column/cell width

By default, when a column is displayed in a browser its width will be adjusted to the longest piece of text in any cell in the column. To set the width of a cell explicitly (this sets it for the whole column containing the cell):

• Put the insertion point inside the cell whose width you want to set.
• Choose Cell Properties....
• Enter a value in the Width text entry box.
• Click on the [Apply] button.

The value you should enter for the width depends on what the browser expects. Netscape Navigator currently interprets a value that you enter as a number of (screen) pixels. Other browsers may interpret the width value differently, or even ignore it. An alternative is to use cell spanning instead: for example, a cell that spans over two cells will be displayed twice as wide as a normal cell.

If more than one cell in a column has a width setting, the longest one is used.

The width setting does not affect how the table is displayed by HoTMetaL PRO.

Wrapping

By default, the content of a cell will wrap when it is displayed in the browser, that is, it will be displayed over several lines rather than one long line. If you want wrapping turned off for the current row or cell:

• Put the insertion point inside the cell you want to modify.
• Choose Cell Properties... or Row Properties... from the Tools menu, as appropriate..
• Turn on the NoWrap check box.
• Click on the [Apply] button.

To turn wrapping off for the current row: Some browsers may ignore these settings.

Background color

You can set the background color of a table row or cell. This feature is not supported by all browsers. To change the background color of a table row or cell:

• Put the insertion point inside the cell you want to modify.
• Choose Cell Properties... or Row Properties... from the Tools menu, as appropriate.
• Click on the [Choose...] button next to the BGColor text entry box.
• Choose a color from the color menu.
• Click on the [Apply] button.

The color of the background in the table cell or row will change in HoTMetaL PRO to reflect your choice of color.

Adding and deleting rows and columns

You can add or delete a single row or column using the Edit Table... command in the Tools menu.

When you select Edit Table... you will get a palette containing several buttons.

The six buttons along the bottom of the palette carry out the following operations:

• : create a new row above the current row.
• : create a new row below the current row.
• : delete the current row.
• : create a new column to the right of the current column.
• : create a new column to the left of the current column.
• : delete the current column.

If you insert a row or column, it adopts the defaults of the current row or column. You cannot delete a column if it has one or more cells that span an adjoining column; similarly, you cannot delete a row if has one or more cells that span an adjoining row. If you still want to perform the deletion, you will have to contract the spanning cells (see the next section, Spanning table cells).

Spanning table cells

The Edit Table... command in the Tools menu allows you to change the spanning of the cell containing the insertion point

Eight icons at the top of the palette extend and contract cells.

Extending cells

Extending a cell is like `knocking out the wall' between cells. The cell-extending icons, in clockwise order from the top, are:

• : extends the top boundary of the cell one cell up.
• : extends the right boundary of the cell one cell to the right.
• : extends the bottom boundary of the cell one cell down.
• : extends the left boundary of the cell one cell to the left.

There are some rules about extending cells:

• The cell being extended into must be empty.
• The boundary that is being removed must be the same length or height as the cell being extended into. For example, a cell that spans one row cannot extend into an adjacent cell that spans three rows.
• You cannot extend vertically into a cell that has already been extended vertically, or extend horizontally into a cell that has already been extended horizontally.
• You should avoid extending every cell in a row up or down. This will collapse the row into the adjacent row so that only one row is visible, even though two rows are actually present in the table markup.

Contracting cells

The cell-contracting icons, in clockwise order from the top, are:

• : pulls the top boundary of the cell one cell down.
• : pulls the right boundary of the cell one cell to the left.
• : pulls the bottom boundary of the cell one cell up.
• : pulls the left boundary of the cell one cell to the right.

Other table features

Not all of the following table features are supported in all browsers, so use them with caution.

Table caption

To give a table a caption:

• Put the insertion point just to the right of the <TABLE> start-tag.
• Choose Insert Element... from the Markup menu, or type Ctrl+I.
• Insert a CAPTION element.

Table header

Table cells are represented by the TD element. Cells can be changed to TH (table header) elements by putting the insertion point in the appropriate cells and choosing the Change Element... command from the Markup menu. If you simply wish to bold the text, we suggest that you insert a B or STRONG element inside the table cell(s) instead of changing the table cell element.

Reformatting tables

Sometimes tables that were not created with HoTMetaL PRO's graphical table editor will not display well in HoTMetaL PRO. Here are some things you can try to improve the appearance:

• If the content of a cell is particularly long it may appear cramped because the cell width does not expand. One solution is to extend cells to the left or right to make a wider cell. If this is not convenient (perhaps the adjacent cells already have data in them) you can create a new column adjoining the current column, and then extend the current cell into the new column. This will create a wider cell. You may want to extend all the cells in the current column in this way.
• If you insert an element inside a table cell and all or part of the tag icon is invisible, it may be that you need to use the Element Styles... command in the View menu to set the `space above' to 0 for this element.
• Note that tables must be rectangular. Opening a file with a non-rectangular table with HoTMetaL PRO could cause problems. You should try filling in the missing cells and then opening the file again.
• If you can't find any other way of improving the table format, you should consider re-creating the table, this time using HoTMetaL PRO's table-editing commands.