Creating and Using Tables

Return to Guidelines for Editing the Web

Return to Rich Text Editor Tools



Inserting a Table and Setting Table Properties

Using tables is a simple and effective way to format your content into rows and columns.

To insert a table, select the "Table" icon. A "Table Properties" window will appear. Definitions of each field are below.

Note: Do not make your tables larger than 500 pixels wide, which is the width of HCDE's body; better yet, set your table percentage at 100%. You may also want to learn the HTML coding behind tables, as correctly formatting them can be tricky.

Table Properties Window

  • Rows: The number of rows in the table. You can add more rows later if needed.
  • Columns: The number of columns in the table. You can add more columns later if needed.
  • Headers: Headers is a style for the first row and/or column of the table. This is what table looks like with row and column headers and without any headers. (Neither of these examples are otherwise formatted.) You can choose to have a header for just the first row, just the first column, both the first row and the first column, or neither.
  • Border Size: Set this as "0."
  • Alignment: This aligns the table (not the text within the table) on the page. Ignore this setting unless you plan to have a table significantly smaller than the width of the page (500 pixels).
  • Caption: This creates a title for the table, which is centered. You can add a caption for the table or leave it blank if its purpose is self-explanatory.
  • Summary: The summary attribute is optional and describes the purpose and/or structure of the table. The overview provided by the summary attribute is particularly helpful to users of non-visual browsers.
  • Width: Set the width to "100%" if you want your table to span the full body width of the page (500 pixels). You can also use pixels, but it's generally easier to evenly split columns when you're working with percentages.
  • Height: Leave this blank unless you want to specifically define the height of the table. If you're concerned about having even row widths, specify the cell height rather than the table height.
  • Cell spacing: Set as "5."
  • Cell padding: Set as "5."

How to edit table properties for a table you've already created.

Once you've decided on your settings, click "OK," and the table will appear with the settings you specified. If you ever want to change the table settings, right-click with your mouse over any part of the table and select "Table Properties."

Note: Do not click on the table icon again to edit the table properties. This will insert a new table inside of your current table!

To delete a table, right-click anywhere over the table and select "Delete Table" from the menu (above "Table Properties").

Return to Top

 

Inserting and Deleting Rows and Columns

Inserting and Deleting RowsTo insert a row or column, click on a cell that is next to where you want to insert the row or column and right-click. When you click on "Row," you'll have the option of inserting a row before the one you're currently in, after the row you're in, or to delete the row you're in. The same options are available under "Column."

Note: You can insert cells in the same way, but this will cause the row or column into which you're inserting a cell to jut out and become unbalanced.

 

Modifying Cell Properties

You can format the text inside your table using the same tools as you would for normal content (e.g., bold or italics). To modify the properties of the cell, however, click on the cell or highlight the cells you want to modify, and right-click. Select "Cell Properties." Definitions of the fields are below.

Cell Properties window

  •  Width: The width of the cells you've highlighted. You can set the width in either percent or pixels.
  • Height: The height of the cells you've highlighted. Note: If your text is too large to fit within the height that you've specified, the table will override this setting.
  • Word Wrap: Leave this setting as " Yes."
  • Horizontal Alignment: This aligns the text within the cells you've selected.
  • Vertical Alignment: This vertically aligns the text within the cells you've selected. Use "Top" for your alignment if you have multiple lines in each cell.
  • Cell Type: This allows you to switch between a "Data" (normal) cell and a "Header" cell.
  • Rows Span: You can set a cell to span more than one row. Note: The cells below will be displaced to the right if you use this tool. If you have more than one cell highlighted, this will have a ripple effect. The balance of the table will also be thrown off. The same effect will occur for column span.
  • Columns Span: You can set a cell to span more than one column.
  • Background Color: Leave this blank or consult the Communications Manager before using.
  • Border Color: Leave this blank.

Return to Top

 

Merging and Splitting Cells

As mentioned above, inserting cells and using the row span and column span tools can mess up the format of your table. The easiest way around this is to use the merge and split cells tools.

Merging Cells

To merge cells, highlight the cells you want to merge and right-click. Under "Cells," select "Merge Cells." The cells will be merged as one and the content of those cells will be combined:

Merge Cells (before) Merged Cells (after)
How to merge cells Merged Cells (after)

Splitting Cells

To split a cell (you can only split one cell at a time), click on the cell you wish to split, and right-click. Under "Cells," choose "Split Cell Horizontally" or "Split Cell Vertically." This splits the cell in two without messing up the balance of the table:

The result of merging and splitting cells
Note: If you split a cell that you previously merged, all of the text will remain in the top-most or left-most cell. It will not split itself between the cells.

Note: If you alter the cell properties of multiple cells with some cells that have been merged or split, the cell properties table settings will override the merge/split and mess up the table formatting.

Return to Top

 


Return to Guidelines for Editing the Web

Return to Rich Text Editor Tools