Drupal Lite 8: Use Tables

Tables are used to organize and display data sets grouped in rows. The Accessible U site has information on the proper use of tables in web pages.

Insert a table into a field

A table can be inserted into any field that has the formatting toolbar.

the formatting toolbar, and the table icon is highlighted.

Note: depending on the resolution of the computer monitor and the browser, the formatting toolbar may look slightly different.

  1. Place the cursor in the field where the table should be located.
  2. Select the table icon in the formatting toolbar. The Table Properties window is displayed.
    the table properties window with 3 rows, 2 columns selected. the headers are in the first row, and the caption is Mascots of the UMN.
  3. Select the number of rows and columns for the table.
    1. Additional rows and columns can be added to the table later.
  4. Select where the headers are located: First Row, First Column, or Both
    1. To meet accessibility requirements, all tables should have a header.
  5. Enter a caption. The caption will appear above the table.
    1. To meet accessibility requirements, all tables should have a caption.
  6. Select OK. The Table Properties window closes and the empty table is added to the field.
  7. Enter the information into the table.

When editing the page, the table will be condensed into the smallest space. As information is added to cells, the table will expand.

Below are three images of the editing window:

  • A fully populated table with a caption and content in all the cells.
  • An empty table with a caption at the top.
  • An empty table with no caption. Notice that the table is exceptionally small. Entering text in a cell will make the table expand.

the edit window with three tables: a table with a caption and content in the cells, a table with a caption but no content in the cells, and a table with no caption and no content in the cells.

When saved, the table will always be displayed in the full width of the region.

Here is the table as displayed on the page. The page is two columns, and the table spans the entire region

the table as it is displayed on a page. the page is two columns, the table is in the left column and spans the entire region.

Editing Tables

The contextual table menu can be used to edit a table to add additional columns and rows, merge cells, and other tasks.

  1. Select the Edit tab.
  2. Right-click on the table. The table contextual menu is displayed.
  3. Select the action from the contextual menu.
    the table contextual menu showing options for: cut, copy, paste, cell, row, column, delete table, and table properties. Cell, Row, and Column have submenus.