You can insert a table into a page, page template, email, email template, or event description.
For manual emails, you cannot insert a table using the email editor. Tables are not responsive, so using them to format an email will lead to poor results on mobile devices. If you need to insert a table to display tabular data, you can insert the HTML for a table into a custom HTML gadget, or copy and paste tables from external editors like Word or Excel.
For each table, you can specify the number of rows and columns you want, choose a background color, and set the border width and color. After inserting the table, you click inside the cells and start adding your content.
Wild Apricot does not provide an option to merge cells within tables. However, you can access the HTML code from the content editor and manually merge the cells using the instructions provided here.
Inserting a table
To insert a table into a page, page template, email, email template, or event description, follow these steps:
- Begin editing the site page, page template, email, email template, or event description.
- Click within the content gadget, email body, or event description where you want the table to appear. The content editor toolbar should now appear at the top of the screen.
- Click the Table icon within the content editor toolbar and select the Create table option.
- On the dialog that appears, you specify the table parameters, including the number of rows and columns, the spacing between tables cells, and the padding (or margin) within each cell. You can also specify the table width – what percentage of the available area it occupies, and the table alignment – whether the table is left or right aligned within the available area. Finally, you can indicate whether the first row should be specially formatted as column headings.
- Click the Background tab and select the background color of the table. You can click a color at the bottom or enter the hex code for the color. To make the background transparent, so that the page background shows through, click the Set to transparent button.
- Click the Border tab and set the color of the cell borders within the table. You can click a color at the bottom or enter the hex code for the color. You can also select the cell border width. To remove the cell borders completely – and make the table invisible – set the Border width to None.
- Click the Insert button to insert your table.
Now, you can click within the table cells on the page and start entering text or adding other content.
Modifying a table
After you have inserted a table, you can add and remove rows and columns, and change several table parameters.
The content editor does not currently include an option to merge table cells. However, you can access the HTML from the content editor and manually merge the cells using the instructions provided here.
Adding rows and columns
To add a row or column to an existing table, follow these steps:
- Click within a table cell, above, below, or beside where you want the new row or column to appear.
- Click the Table icon within the content editor toolbar and select one of the Insert options.
Removing rows and columns
To remove a row or column from an existing table, follow these steps:
- Click within a cell within the row or column you want to remove.
- Click the Table icon within the toolbar and select one of the Delete options.
Changing table parameters
To change the parameters for an existing table, follow these steps:
- Click within any cell in the table. If you want to modify parameters for a single row or column, click a cell within the row or column.
- Click the Table icon and select one of the following options.
Size
Table width
Width of the table. You can choose from predefined widths – in pixels or as a percentage of the screen width – let the width being automatically determined by the table content (Auto), or click More... to set a specific table width.
Table height
Height of the table. You can choose from predefined heights (in pixels), let the height being automatically determined by the table content (Auto), or click More... to set a specific table height.
Row height
Height of the currently selected row. You can choose from predefined heights (in pixels), let the height being automatically determined by the row content (Auto), or click More... to set a specific row height.
Column width
Width of the currently selected column. You can choose from predefined widths – in pixels or as a percentage of the screen width – let the width being automatically determined by the column content (Auto), or click More... to set a specific column width.
Align
Table alignment
Horizontal alignment of the entire table.
Row horizontal align
Horizontal alignment of the currently selected row.
Row vertical align
Vertical alignment of the currently selected row.
Column horizontal align
Horizontal alignment of the currently selected column.
Column vertical align
Vertical alignment of the currently selected column.
Cell horizontal align
Horizontal alignment of the currently selected cell.
Cell vertical align
Vertical alignment of the currently selected cell.
Padding
The padding within table cells (in pixels). Padding is the distance between the cell content and the cell border.
Border
Table border width
The width of the table border. You can choose from predefined widths, set the width to none, or click More... to set a specific border width.
Table border color
Color of the table border. You can click a color at the bottom or enter the hex code for the color.
Row border width
The width of the border for the currently selected row. You can choose from predefined widths, set the width to none, or click More... to set a specific border width.
Row border color
Color of the border for the currently selected row.
Column border width
The width of the border for the currently selected column. You can choose from predefined widths, set the width to none, or click More... to set a specific border width.
Column border color
Color of the border for the currently selected column.
Cell border width
The width of the border for the currently selected cell. You can choose from predefined widths, set the width to none, or click More... to set a specific border width.
Cell border color
Color of the border for the currently selected cell.
Background
Row background color
Background color of the currently selected row. You can click a color at the bottom or enter the hex code for the color. To make the background transparent, so that the page background shows through, click the Set to transparent button.
Column background color
Background color of the currently selected column.
Cell background color
Background color of the currently selected cell.
Viewing invisible tables
To view the borders of invisible tables – tables with the Border width set to None – click within the table then click the Table icon and select the Show outline tables option.
To hide the borders of invisible tables, select the Hide outline tables option.
Deleting a table
To remove a table, follow these steps:
- Click with any cell in the table.
- Click the Table icon and select the Delete table option.
