Working with Tables
The built-in editor allows you to insert and edit tables. HTML tables—those on web pages—aren't very different from tables created in applications like Microsoft Word. Here you'll learn best practices (max/min width, editing, properties, etc) for working with tables in the School of Medicine web system.
Tables with a fixed-pixel width should not be wider than 765 pixels in a 2-column layout and 525 pixels in a 3-column layout. A 2-column page is a page that does not display any portlets along the right hand side of the page. A 3-column page is one that does.
Inserting a Table
To insert a table:
- Place the cursor where you'd like the table to appear, and then click the Insert/Edit Table button (
) in the editor. The Insert/Modify Table dialog appears:
- Edit the basic parameters for your table:
- Class - Allows you to choose a predefined style for the table:
- Subdued grid - the table will have preformatted headers
- Invisible grid - the table will have invisible borders
- Fancy listing - the table will have forced lower-case headers & dashed borders between body rows
- Fancy grid listing - the table will have extra space around content in the table cells
- Fancy vertical listing - the table will have extra space around content in all cells
- Cols - The number of vertical columns.
- Rows - The number of horizontal rows.
- Summary - A short summary of the table's content can be added for low/no-vision users who're browsing with special devices.
- You can also add a Table caption. Scrolling horizontally to the middle of the Table Properties dialogue box, click Advanced, & check this option.
- Click Insert.

If you need to fine tune things further, the Styles... menu contains many of the Table Properties styles (see image on right). Applying the Even row style to every other row can make wide or long tables easier to follow. Here's a basic table that takes advantage of the Fancy grid listing option available in Table Properties, along with the Even row style:
| Year | Amount (in millions) |
|---|---|
| 2009 | $349.6 |
| 2008 | $356.8 |
| 2007 | $298.6 |
| 2006 | $288.2 |
Source: UNC Office of Sponsored Research
[top]
Editing a Table
To edit an existing table, don't click the Insert/Edit Table button in the editor—that just creates a new table. Instead,
- Right-click (Ctrl-click on a Mac) the table itself in the layout. The editor's context-sensitive menu should appear:

-
Select an action or properties dialog. Available options include Cell, Row, and Column options, as well as Table Properties, where you can edit the parameters entered when the table was first created.
-
If applicable, enter desired info, and click OK.
Alternately, you can edit a table using the buttons available in the TinyMCE text editor:
Row Properties:- Row height
- Vertical alignment
- Advanced options (scroll horizontally to the middle of the Row Properties dialogue box; click Advanced):
- Row in table part (i.e., Table Header, Table Body, Table Footer)
- Update table row properties for: Currently selected row, Odd rows, Even rows, or All rows
Cell Properties- Cell height
- Cell width
- Vertical alignment
- Scope
- Advanced options (scroll horizontally to the middle of the Cell Properties dialogue box; click Advanced):
- Update cell properties for: Current cell, All cells in row, or All cells
Insert Row Before
Insert Row After
Delete Row
Insert Column Before
Insert Column After
Delete Column
Split Merged Cells
Merge Cells
[top]
Deleting a Table
To delete an existing table, do one of the following:
- Place the cursor directly after a table and hit backspace.
- Right-click the table and select Delete Table.
[top]
