Drupal Theme: 
UQ Base Template
Learning Objectives: 

On this page site editors will find the step-by-step instructions on how to insert a table on their Drupal website.

Tables can be used to display data in a grid. They should not be used for general content layout, such as aligning images with text, as it does not work with responsive design to display well on mobile devices. There are templates available to handle common layouts involving images and text.

Step 1: Insert a table

  1. Position the cursor where the table should be placed.
  2. Select the table icon from the editor menu
    Table icon in the editor menu
  3. In the Table properties dialog window, enter the number of rows and columns required
    Table properties dialog window
    Applies to the first row or column and defines what the values in each row and column mean.
    Border size
    Sets the pixel width of the table border. Usually 1 or 0.
    Sets the alignment of text in the table cells. Should be left as Not Set in most cases as this will default to a left alignment.
    Sets the overall width of the table. Defualts to 500 pixels but should be changed to 100% in most cases. Using a % width allows the table to respond more effectively on mobile devices.
    Sets a fixed height on the table. This should be left blank so that the table height expands naturally according to the content in it.
    Cell spacing
    Controls the space between table cells.
    Cell padding
    Controls the space between the border and the content of the table cell.
    Adds a caption above the table that explains what the table is about. e.g. "Results of survey into Drupal usage at UQ"
    Defines a summary of the contents of the table. Doesn't appear on the page but can be read by screen readers and search engines.
  4. Click OK to create the table.
  5. Add content to the table cells.

Table styles

The UQ Base theme has a range of different table styles which can be used by applying a class. The Style Guide contains the full list of table styles.

To apply a class, open the table properties and click on the Advanced tab. Enter the class style under "Stylesheet Classes".

Advance options for tables

EXERCISE: Adding Tables

  1. Navigate to the "Contact Us" webpage
  2. Select the "table" icon and add a new table that includesing rows, columns and a header.  Insert text into your table.
  3. Visit the help guide and view the list of table styles you can use
  4. For the list apply a table style that will make your table green

NEXT: Image Browser