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 for working with tables in the School of Medicine web system.

Inserting a Table

To insert a table:

  1. Place the cursor where you'd like the table to appear, and then click the Insert/Edit Table button (Table) in the editor. The Insert/Modify Table dialog appears:
    Insert Table
  2. Class - allows you to choose a predefined style for the table.  View examples of all the table styles.
  3. Cols - The number of vertical columns.
  4. Rows - The number of horizontal rows.
  5. Summary - A short summary of the table's content can be added for low/no-vision users who're browsing with special devices.
  6. You can also add a Table caption. Scrolling horizontally to the middle of the Table Properties dialogue box, click Advanced, & check this option.
  7. Click Insert.

 

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,

  1. Right-click (Ctrl-click on a Mac) the table itself in the layout. The editor's context-sensitive menu should appear:

    Edit Table

  2. 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.

  3. If applicable, enter desired info, and click OK.

Alternately, you can edit a table using the buttons available in the TinyMCE text editor:

  • Row BeforeInsert Row Before
  • Row After Insert Row After
  • Delete Row Delete Row
  • Column Before Insert Column Before
  • Column After Insert Column After
  • Delete Column Delete Column
  • Split Merged Split Merged Cells
  • Merge Cells Merge Cells

Making a Table "Responsive"

Responsive Table
Can scroll horizontally without disrupting the rest of the page layout.

Tables can be as small or large as needed to contain the data within its rows and columns.  This can be a challenge when tables are large (very wide), since such tables may not fit on a viewer's computer screen without forcing a horizontal scroll bar for the entire browser window.  This can make viewing cumbersome on small devices like tablets and smartphones.

The solution to this problem is to make a table "responsive", which allows the table to adapt to fit the viewers' screen, without affecting the rest of the page. This adaptation consists of a scroll bar being added just for the table (and not the entire page), and only when such a scrollbar is needed.

To make a table responsive (requires editing HTML):

  1. While editing the page with the table, click the HTML button on the visual editor.
  2. In the source code window that appears, find the opening <table> tag for the table you want to make responsive.
  3. Add a class called "responsive" (i.e. <table class="responsive">).  If a table already has a class or classes associated with it, simply add responsive as an additional class (i.e. <table class="table table-bordered responsive">).
  4. Click OK, and then Save the page.

 

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.