TechNote (Archived)

Working with tables in Contribute

Tables are a great way to format data within a web page. They were initially used to format scientific data when the internet was the domain of scientists and computer scientists. Now tables are used for web site layout and design because they are stable and all browsers know how to render them consistently.

Note: There are some known issues with rendering on Macintosh OS X that may affect how tables look. For more information, see Rendering Issues with Contribute 2.0 for Mac (TechNote 18738).

Table Basics

Macromedia Contribute makes using tables easy and intuitive, but it's good to have an understanding of table terminology so that you can build tables quickly and use all available tools.

Tables consist of rows and columns. The number of rows and columns define the number of cells in the table. Cells are the individual units or boxes in the table. All content is inserted into the cells. You can define a table with any number of rows and columns, and have the flexibility to add, subtract and merge cells together. Contribute has a variety of ways of creating and editing your tables.

Tables also have properties that define the look and layout.

Border - The line that surrounds the outside of the table. This can be set to any size or none at all, but 1-3 pixels is standard. Border colors can also be set.
Cell Padding - This is the amount of space between the actual content of the cell and the cell border. This property can affect the layout of content within a cell.
Cell Spacing - This is the amount of space between the borders of the cells.
Table Header - A header is a row that is used to distinguish columns or rows. If you have a table of addresses, the header is the row that specifies the Name, Address, Phone, etc... Headers are usually made bold.
Background color - Background colors can be set for the whole table or for individual cells.

Creating a Table

Creating a table in Contribute is easy.

Put the cursor at the point in the document where you want to insert the table.
Click the Table button in the toolbar (Ctrl + Alt + T). This following dialog box will appear.
Set the number of rows and columns. More can be added later if needed.
Set the Width of the table. Automatic Width is the default setting. Specific width allows you to specify a certain value. In web pages only width is defined, height is not defined.

You can specify the table width to be a certain number of pixels wide or as a percentage of the page. If you set the width to 50%, the table will extend half the width of the users screen, no matter what size.
Specify any border width, cell padding and cell spacing you wish. Again, these can be modified later.
Click on a header style if you want one. Click OK to create the table.
Note: Once you have created the table, you can select it and click and drag on the lower right corner to resize it.

A word about table widths

Table widths can be set as a pixel value or a percentage value. Pixel values are good when you want to have a very consistent look on the page and not have things move around. Percent values are good when you want to fill the page to a consistent degree.

When using a value like 50%, the table should always fill up half the screen. However, there are some limitations to this. Text can stretch and wrap as needed when resizing a browser window or on different screen resolutions, but images cannot stretch and compress. If you have a series of images across your table, the table will not be able to compress smaller than the total width of all the images. The cells can stretch to make the table bigger, but this will only affect the spacing of the images not their size.

Adding and deleting rows and columns

At times you may need to add a row or a column to your table.

To add or delete rows and columns:

Click on the Add Row or Add Column button. This will add a row above the selected row and a column to the left of the selected column.
Choose Table > Insert > Multiple Rows or Columns. This will allow you to specify how many to add and determine whether they go before or after the cursor.
Right click on the table to get specific placement options (Add Row above selection, Add row below selection...).
To delete a row or column, click within the correct row or column, right click and select the appropriate Delete option or choose Table > Delete> Row or Column.

Merging and splitting cells

At times you may want to merge two cells together or possibly entire rows or columns.Â Sometimes it is necessary to split cells to reformat your table, which is quite simple in Contribute.

To merge cells:

Select the cells to be merged.
To select an entire row or column, put your cursor in the first cell of the row or column, hold down the Shift key and click in the last cell.Â
To select certain cells only (you can only merge touching cells), hold down the Ctrl key and click in all the cells you want to merge. You can also click and drag over the cells you wish to select.
Right click and choose Merge Cells.

To split a cell:

Select the cell to be split.
Right click (or choose Table > Split Cell) and choose Split Cell.
In the dialog box that opens, choose Rows or Columns and specify how many to make. Click OK.

Setting table properties

Once a table is created you can go back and adjust the properties of the table and also the cells. There are separate property settings for the whole table and for each of the cells.

To modify table and cell properties:

Make sure the table is selected or have the cursor within the table.
Choose Table > Table Properties.
The Table Properties tab will give you the properties available when you create a table: cell padding and spacing, borders, etc.

The Cell Properties tab gives you access to cell specific properties. Here you can set the alignment for a cell, the background color and whether or not the text will wrap automatically.

You can also set properties at the row or column level. It depends on what is selected when you open the Table Properties box.

To set properties for a column or row:

Select the entire row. You can do this by selecting all the cells in the row or column or if you place your cursor at the very right or top edge along the table, it will turn into an arrow that will select the row or column when clicked. The selection area is narrow!
Right click and go to Table Properties. The dialog will now say Table Column Properties. Set the values and Click OK to close the dialog box.

Formatting a table

Contribute has built in table formatting. These are predefined ways of setting color and formatting schemes.

To Format a table:

Put the cursor within the table.
Click on the Format Table button in the toolbar or choose Table> Format Table.
A dialog box will open with a list of formatting options.
The Basic tab will show previews of the color schemes available to you. You can choose the default setting or go to the Advanced tab. The Advanced tab will allow you to change the row color, text style and text alignment for each of the row types.
Click Apply to preview your table or click OK to finish the table.

Sorting a table

Contribute also has sorting options for the data in your table. You can sort tables alphabetically or numerically, ascending or descending and then sub sort within another column.

To sort a table:

Put the cursor in the table. (Tables that have merged cells cannot be sorted.)
Click on the Sort Table button or choose Table > Sort Table.
In the dialog box that opens, choose the column number that you want to sort, choose alphabetically or numerically and ascending or descending.
If you wish to sub sort by another column, enter the settings in the 'Then by' fields. There are check boxes that allow you to include headers and hooters and other options.
Click Apply to test the options and click OK when you are satisfied with the table.