You can easily add a table of any size and customize its layout to structure data for readability. In these examples, we use editing a wiki page, but these capabilities are available for any content area throughout Telligent Community that uses the enhanced editor.

Settings

The table dialog box has two tabs, which are explained in the following sections.

General tab

Properties in the General tab apply to the whole table or to each table cell. For example, Alignment refers to whether the table itself is aligned left, center, or right (or has no alignment). Cellpadding refers to the amount of white space in each table cell.

These properties can be overridden the page's HTML of the page if required. The HTML for the item is shown in the description so that you can locate it if necessary for alteration.

Item Description, with HTML code for the item
Cols Number of columns the table will have. Does not specify this measurement in the HTML as colspan="..."; instead, inserts the number of <td> columns required for the number of columns you specify. For example, specifying five columns will yield five <td> columns in each row.
Rows Number of rows the table will have. Does not specify this measurement in the HTML as rowspan="..."; instead, inserts the number of <tr> rows required. For example, specifying two rows will yield two <tr> tags representing the rows.
Cellpadding Amount of padding (white space), in pixels, present on all sides of each table cell. (Does not affect spacing between cells.) Specified in the HTML as cellpadding="...". As an example, you may want to add a few pixels of white space around the numbers in table cells. With a one-pixel border (border="1"), this will create thin borders around large cells with text in the middle.
Cellspacing Amount of spacing, in pixels, between table cells. (Does not affect padding within cells.) Specified in the HTML as "cellspacing="...".  For example, you may want to create the look of text being contained in buttons on your table. If you use wide cellspacing with a border, the result will be the opposite of using wide cellpadding - wide borders with little white space around the text.
Alignment Alignment of the table to the left or right margin or the center of the page. If you leave the Not Set option, the table defaults to the left margin. In the HTML, this is specified as table align="...". If you align a table to the center, you might see a block of space marked off in the left margin along with the table you created in the center. This does not affect the table.
Border Thickness, in pixels, of the line border between cells. Indicated in the HTML by border="...". If you leave this value as zero, a border will not display in the table.
Width The fixed width, in pixels, of the whole table. Indicated in the HTML by style='width: ...px;'. If you do not specify the width, the table cells will automatically expand to accommodate the widest text in the column, wrapping when necessary as required by the font you've chosen for it.
Height Fixed height, in pixels, of the whole table. Indicated in the HTML by style='height: ...px;'. If you do not specify the height, the table cells will automatically expand to accommodate the highest number of lines in the row.
Class Style class for row. By default, Telligent Community offers five classes for the rows. These are the the same as the items in the Styles drop-down list. You can specify none if you don't want to apply a class style to the table, or you can specify a CSS style value from the CSS  in your page. For example, typing WikiTable (if you have this defined) in the Class field will yield the statement table class="WikiTable" in the HTML, and the table will take on the characteristics specified in this class.
Table caption Places a text box at the top of your table. Note: This table caption cell spans the table and cannot be split as other table cells can.

Advanced tab

The advanced tab deals primarily with styling or identification.

Item Description, with HTML code for item
ID Specifies a unique ID for the table, e.g., id="...". For example, entering Table 2 will result in this ID being listed in the HTML.
Summary Table summary that displays in the HTML, e.g., summary="...". For example, entering The table values are in pixels will result in this summary being placed in the HTML.
Style Enables adding a style to the table. For example, background-color:#eeeeee will result in a light-grey background and is specified as style='background-color:#eeeeee;' in the HTML
Language code Language code of the table. The default is EN. You can only specify the language code of the language pack installed. This displays in the HTML as lang="...", for example "lang="EN".
Background image URL of the image (for example, specify http://www.google.com/images/logos/ps_logo2.png). In the HTML, this displays as style='background-image: url(http://www.google.com/images/logos/ps_logo2.png);'.
Frame Location of a line border around the entire table (e.g., frame="above" places a line border at the top of the table; frame="border" places a line border around all sides of the table).
Rules Location of a line border between the table cells (e.g., rules="cols" places a line border between table columns; rules="all" places a line border between all cells).
Language direction Left-to-right or right-to-left language rendering.  The default is left to right. You can specify right to left for languages that read this way. In the HTML, this displays as dir="rtl" or dir="ltr".
Border color Color of the outside table border. Indicated in the HTML by style='border-color: #...;'. For this border to display, border or border-width must have a positive value.
Background color

Background color of a table. For example, entering eeeeee will result in a light grey background color. The HTML specifies an expression like style='background-color: #eeeeee;'.

Create a table

  1. In a wiki page in Edit Page mode, click the Insert/edit table button  .

  2. A dialog displays, allowing you to specify the basic and advanced settings for the table.

  3. Minimally specify the number of columns and rows to size your table.

  4. Click Insert. Your table is added to the wiki page with no content. Enter the appropriate content and save your wiki page to view your table.

top

Insert a row

  1. Enter Edit Page mode for a wiki page that includes a table or create a table within the editor text area.

  2. Click anywhere in a row in the table from which you want to insert a new row.

  3. To insert a new row above the current row, right-click and select Row > Insert a Row Before from the contextual menu.

  4. To insert a new row below the current row, right-click and select Row > Insert a Row After from the contextual menu.

top

Delete a row

  1. Enter Edit Page mode for a wiki page that includes a table or create a table within the editor text area.

  2. Click anywhere in the row in the table that you want to delete.

  3. Right-click and select Row > Delete Row from the contextual menu. The row is removed.

top

Insert a column

  1. Enter Edit Page mode for a wiki page that includes a table or create a table within the editor text area.

  2. Click anywhere in the column within the table next to which you want to insert a new column.

  3. To insert a column to the left of the current column, right-click and select Column > Insert Column Before from the contextual menu.

  4. To insert a column to the right of the current column, right-click and select Column > Insert Column After from the contextual menu.

top

Delete a column

  1. Enter Edit Page mode for a wiki page that includes a table or create a table within the editor text area.

  2. Click anywhere in the column in the table that you want to delete.

  3. Right-click and select Column > Remove Column from the contextual menu. The column is removed.

top

Merge cells

  1.  Enter Edit Page mode for a wiki page that includes a table or create a table within the editor text area.

  2. Click within a cell that you want to merge with other cells around it.

  3. Right-click and select Cell > Merge table cells from the contextual menu. A dialog displays:

  4. In Cols, specify the number of columns to the right of the current cell that you want to merge with that current cell.

  5. In Rows, specify the number of rows below the current cell that you want to merge with that current cell.

  6. Click Update. The cells you specified are merged together with any content in the cells merged together as well. Note that if you decide to split the merged cells, the content will remain merged together after the split.

top

Split merged cells

  1.  Enter Edit Page mode for a wiki page that includes a table or create a table within the editor text area. Merge cells together.

  2. Click in the merged cell.

  3. Right-click and select Cell > Split merged table cells from the contextual menu. The cells are split back to the way they were previously, but if you initially merged cells with content, the content is still merged together. You will have to manually separate the content if you want.

top

Add a background color to a table cell

This procedure assumes you are in the editing mode on the wiki page and have created a table.

  1.  Enter Edit Page mode for a wiki page that includes a table or create a table within the editor text area.

  2. Select the table to which you want to add a background color.

  3. Right-click and select Cell > Table cell properties from the contextual menu. A dialog displays, allowing you to specify the basic and advanced settings for the table.

     

  4. Select the Advanced tab and locate the Background Color property.

  5. Click the browse button to display a color selection dialog.

  6. Select the color you want in the color selection dialog.

  7. Click Apply to close the dialog.

  8. Click Update to add the background color to the table cell.

top

Delete a table

  1. Enter Edit Page mode for a wiki page that includes a table or create a table within the editor text area.

  2. Click in a cell within the table.

  3. Right-click and select Delete table from the contextual menu.

Make a table scrollable

If your table is simply too wide for your page, you can make it scrollable (left to right):

  1. Open the wiki page HTML window.
  2. Locate the <table> tag.
  3. Insert the following tag immediately preceding it:
    <div style='overflow: scroll'>
  4. Locate the </table> tag and insert the following tag immediately following it:
    </div>

About importing tables from Microsoft Word

You can import tables from Microsoft Word into Telligent Community using the "Copy from Word" button. However since Telligent Community uses TinyMCE's import functionality, the limitations of that editor are the limitations of Telligent Community's table import. For example, it's known that TinyMCE does not import table cell shading or border formatting.

top