Create Accessible Tables in eCampus

Add Tables in the Content Editor

New Text Editor Interface in Blackboard Ultra
 

You can add and format tables in the content editor. This content editor appears in your eCampus course wherever you can add text including assignments, discussions, journals, and tests. You will have creative control over how your content will appear, as well as the flexibility to change the appearance and order.

It is important to make sure your content is accessible to all users. So, use tables only to present data rather than for layout or presentation purposes. This is because users who are blind or may have other visual difficulties need to use screen readers to have text on the web read aloud. When these screen readers read table information, it can be difficult for users to understand. In the editor's text box, put your mouse pointer where you want to add a table and select the Insert/edit table icon. You can also use the right-click menu.

Insert table button on the New Text Editor Interface in Blackboard Ultra
 

Most of the table options are grayed out and unavailable unless you access an existing table in the text area.

To resize a table, press and drag a table's corners or sides.

Insert and resize a table in Blackboard Ultra content editor

Table Properties

When you add a table, you can set the table's basic properties on the General tab.

Graphical user interface, text, application. Description automatically generated
 

The system uses pixels for padding, spacing, and borders. You can use a percentage or pixels of the available display for the width and height of the table. The table is sized automatically to fit the content if you leave the height box blank.

If you don't select a table alignment, the current paragraph alignment is used.

Select the Show Caption check box so that you can add a title that appears centered over your table.

Advanced Tab

Graphical user interface, text, application. Description automatically generated
 

On the Advanced Tab, you can set additional properties for a table from menus and color boxes. You can also add information about these properties:

  • Background Color: Select a color from the color selector, the palette or write down the color code preceded by the # character to become the background color.
  • Border Color: Select a color from the color selector, the palette or write down the color code preceded by the # character to become the border color.
  • Border Styles to choose from:
    • Dashed
    • Dotted
    • Double
    • Groove
    • Hidden
    • Inset
    • None
    • Outset
    • Ridge
    • Solid

Set Table Row and Cell Properties

When you see the formatting parameters, they will control how the content of table rows or cells will appear. Also, select a table and then select the Table Row Properties or Table Cell Properties icon. You can also select a row or a cell and use the right+click menu to display any of these options too. Both Cell and Row property windows have General and Advanced options.

On the General Tab, you can set basic properties for rows and cells, including type, alignment, and height. The row will size automatically to fit the content if you don't set a height for a row.

General Properties for Rows:

  • Alignment: Left, Center or Right
  • Height: Desired height in pixels. If left blank, it will take de default value depending on the text size.
  • Type: Header, Body, or Footer

On the Advanced Tab, you will have the same properties as the ones for a table.

General Properties for Cells:

  • Cell type: Cell or Header
  • H Alignment (Horizontal): Left, Center or Right
  • Height: it can be described in pixels or percentage
  • Scope: None, Row, Column, Row group or Column group
  • V Alignment (Vertical): Left, Center or Right
  • Width: it can be described in pixels or percentage

The Advanced Tab will have the same properties as the ones for a table, plus the Border width value (in pixels).

Edit Tables

In the editor's text box, you can select a table, or a group of cells, to make the table editing options active.

The list below are the content editor table icons, as they appear from left to right on the text editor. Learning these icons will help you become familiar with these icons as well as become better equipped to create content using tables in eCampus.

IconDefinition
Insert/Edit table window Open the Insert/Edit Table window. If you select the icon while inside a table, a new table is created inside the first one.
Delete Table icon Delete the table currently selected.
Open Table properties icon Open the Table Properties window.
Open table row properties icon Open the Table Row Properties window.
Open table cell properties icon Open the Table Cell Properties window.
Insert blank row above table icon Insert a blank row in the table above the current mouse pointer position.
Insert blank row below table icon Insert a blank row in the table after the current mouse pointer position.
Delete current row from table icon Delete the current row from the table. If you select multiple rows, all are deleted.
Insert blank column  to the left icon Insert a blank column in the table to the left of the current mouse pointer position.
Insert blank column to the right icon Insert a blank column in the table to the right of the current mouse pointer position.
Delete current column icon Delete the current column from the table. If you select multiple columns, all are deleted.

Other Table Accessibility Tips

Use a simple table structure

Avoid tables nested within other tables, and merged or split cells. All of these will make it very difficult, if not impossible, for screen readers to provide helpful information about the table.

Avoid blank cells

Never leave the left uppermost cell blank; it's the first cell a screen reader user will encounter. Blank cells anywhere in the table could also mislead someone using a screen reader into thinking that there's nothing more in the table.

Use tables for information, not layout

Avoid using tables to make the layout of the page look a certain way. It's best to only use tables when presenting rows and columns of related information.

Resources