Skip to main content

How do I add a table?

How to insert a table

  1. Browse to the page where you want to insert a table.
  2. In the utility links at the top of the screen, select Edit. You need edit permissions to do so, otherwise you won't see the Edit link – contact the page owner for access.
  3. Choose Edit centre content or Edit right content from the drop-down menu, depending on which section of the page you want to edit.
  4. In the content editor, place the cursor where you want to insert a table.
  5. In the toolbar, choose Insert a... > Table.
  6. The Insert/Edit Table window appears. You can specify the number of columns and rows, whether to show a border or not, alignment and whether to include a caption.

    Insert or edit table window

  7. Specify the options for your table:

    • Tables used for layout are reordered when displayed on small-screen devicesThis is a layout table: Tables in web pages are used to display tabular data. If you are using a table to show data, unselect this checkbox. However, if your table is used to control layout, select this checkbox; the table cells will automatically reflow on small-screen devices.
    • Columns: Type the required number of columns.
    • Rows: Type the required number of rows.
    • Alignment: If your table width is less than 100% of the page's width, you can align the table to the left, centre or right of the page. If you choose Left or Right alignment, any text following your table wraps alongside the table. If you choose Not Set or Centre, the table displays as a block; text does not wrap alongside it.
    • Border: Select the checkbox to include a border.
    • Width: Specify the table's width as a proportion of the page width by choosing 33%, 50%, 75% or 100% from the drop-down menu. (You can edit each column width after you've created the table by right-clicking a column in the content editor.) Auto, the default, means the table automatically resizes as you enter your content.
    • Sortable: Select the checkbox to enable visitors to sort the table by clicking a column heading.
    • Table caption: It's good practice to include a brief caption describing a data table, as this helps make the table more accessible. Selecting Table caption places a pair of <caption></caption> tags in the html. You can write your description between the tags.
  8. Once you have specified the options, select the Insert button. You should now see the table in the content editor.
  9. Click in each cell and enter your text or data.

    Note: You can adjust widths or heights of rows, columns or cells by right-clicking on a cell and selecting Cell, Row or Column properties. To merge or split cells, right-click on the cells you wish to merge and select Cell > Merge Table Cells. You can also use the right-click menu to remove rows and columns.

  10. When you have completed your table, select the Publish button.

How to format border and background colours

  1. Insert a new table in the content editor or, for existing tables, right-click in the table and select Table Properties.
  2. The Insert/Edit Table window appears. Go to the Advanced tab:

    Advanced options in Insert/Edit Table window

  3. There are two ways to specify the border or background colours:

    • Enter the hexadecimal colour code, including the hash. For example, #00AAFF for blue.
    • Alternatively, click the icon to the right of the Border Color or Background Color text box and select the appropriate colour using the picker:

      Select a colour

  4. When you have chosen the colours, select the Update button.

    Note: Each SiteBuilder website has a style sheet governing its design. Any table should 'fit' within your department's site look and feel.

How to make a table sortable by column heading

  1. Browse to the page containing the table.
  2. In the utility links at the top of the screen, select Edit > Edit centre content (or Edit right content, depending on which section contains the table).
  3. Right-click in the table and choose Table Properties. The Insert/Edit Table window appears.
  4. Select the Sortable checkbox.
  5. Click the Update button.
  6. Next, you need to specify which columns sort the table. For each column you wish to use, right-click in the top cell and select Cell > Table Cell Properties. The Table Cell Properties window appears.
  7. Select the Sortable checkbox:

    Table Cell Properties window

  8. Click the Update button.
  9. The table is now sortable by the columns you specified. For example, this table is sortable by year:
Year Column heading 1 Column heading 2 Column heading 3 Column heading 4 Column heading 5
2015 1 2 3 3 4
2016 4 5 6 1 2
2017 7 8 9 2 3

Support

Telephone 73737
Email webteam at warwick dot ac dot uk
How to report a problem