Tables are a great way to present information on your website, within emails, or anywhere where text blocks are allowed. Within Eventsforce, tables can be formatted in a number of different ways, allowing you to achieve your design needs. The level of customization for tables may be limited based on your knowledge of technical code.
If you have a table which is already formatted with many columns, rows, unique sizes, colors, etc, we would suggest asking the original table designer to make changes to prevent any unwanted issues or copy the table content first and create a new table to preserve the original.
Note: The goal of this article is to provide some useful tips for basic table editing. Eventsforce does not support any custom code you may add to your tables.
This article will cover the following:
Copying a table
One recommendation before editing tables would be to copy the table into a new text block or email and make edits to the copy. This can help to preserve the original, especially if you are not the original creator of the table. We can copy tables and their formatting by using the raw HTML code, see steps below:
Open the text editor or email containing your table
Use the source code “<>” button to view the HTML code
Copy all the code to include all content, or just copy the table code, starting and include “<table>” and end with “</table>”
Copy the code
Create a new website page, email, or text block
Use the source code “<>” button to view the HTML code
Paste the copied code, and click “Ok”
Make edits as needed
Note: Once you’ve made all the edits in the new version, you can always copy the code from the new table and paste into your original email, or text block.
Adding a table
Tables can be added to a number of different areas in Eventsforce, these include: website pages, registration pages, and emails. To add a generic table to a website, take the following steps:
Go to Websites > Content > Website Pages (or any other page or email)
Hover over ‘Add here’ and select “Text block”
Use the ‘Table’ dropdown, hover over “Table” and select the number of rows and columns your table should contain
Add the content to your table in the appropriate columns and rows
Click “Save”
Once a table has been added, you can place your cursor anywhere inside the table to display the table “toolbar”. The toolbar has shortcut icons to take actions such as; access table properties, delete table, add/delete columns, or add/delete rows.
Adding a column
Once a table is added, you may find that additional columns are needed. Columns can be added individually where needed. Take the steps below to add a new column:
Go to edit the text block or email containing your table
Place your cursor in the location you want the column added (either before or after)
Use the icon in the table toolbar OR use the ‘Table’ dropdown, hover over ‘Column’ and select “Insert column before” or “Insert column after”
Repeat as needed until all columns are added
Click “Save”
Note: If you’ve already set widths for each column, these may need to be updated after adding new columns.
Adding a row
After a table is created, you may find that additional rows are needed. Rows can be added at any time. Take the steps below to add a new row:
Go to edit the text block or email containing your table
Place your cursor in the location you want the row added (either before or after)
Use the icon in the table toolbar OR use the ‘Table’ dropdown, hover over ‘Row’ and select “Insert row before” or “Insert row after”
Repeat as needed until all rows are added
Click “Save”
Note: Rows can also be cut, copied, and pasted. This can be used if you’re trying to keep formatting from an existing row.
Merging and splitting cells
Once your table contains columns, rows, and perhaps some content, you can begin customizing your table display further. These customizations involve merging or splitting cells allowing you to make your table more unique to your content. Follow the steps below to learn how to merge cells:
Go to edit the text block or email containing your table
Starting from the main cell, highlight the two or more cells you want to merge (the main cell usually contains the content you want to keep)
Select the “Table” dropdown and go to Cell > Merge cells
Click “Save”
Note: Splitting cells is the opposite of merging. Cells that have been merged incorrectly can be split to return to normal. A row can only contain as many cells as columns.
Adjusting table size (table, columns, and rows)
A common change to tables relates to the size of the overall table, as well as size of columns and rows. In order to make your tables responsive, it’s important to use percentages when adding widths.
Note: If possible, we suggest adding all content (columns, rows, text, images, etc) prior to resizing your tables.
Adjusting the size of entire table
Generally the size of your table should be “100%” so that it spans the full width of your website page. To keep your table responsive, it’s important to use percentages. Take the steps below to change the size of your table (border has been added for better demonstration):
Place your cursor within the table to edit
Hover over the ‘Table’ dropdown and select “Table properties”
Enter “100%” into the width field for a table that spans the full width of your page (enter smaller widths like “50%” for a table that spans half the page)
Click “Save”
Note: Using a fixed width (example: 600px) may cause display issues on mobile devices, as the table may be wider than the viewable area.
Adjusting the size of columns
By default, the column size is determined by the amount of content added. For best display, you may want to force columns to a specific size/percentage. We suggest using percentages for column widths as this will ensure the table is responsive.
Place cursor in the topmost cell of the column you want to update
Hover over the ‘Table’ dropdown and go to Cell > Cell properties
Enter a percentage in the “width” field for how wide the column should be
Click “Save”
Note: To keep column sizes consistent, use percentages based on how wide a column should be relative to the table. For example, if you have a table (set to 100%) with 2 columns for showing hotel images and text, you may want to make the column containing text “70%” while the column containing images “30%”. Changing the size of one cell in the column will affect all other cells in the same column (unless separate sizes are given to each cell).
Adjusting the size of rows
By default, the row width is determined by the table width, and the row height is determined by the amount of content added. You can increase row size by simply adding extra space (pressing “Enter” key) where needed. Row sizes can use either fixed heights (pixels) or percentages, as the height generally does not affect the responsive view of a website.
Place cursor in the row you want to update
Hover over the ‘Table’ dropdown and go to Row > Row properties
Enter a value in the “height” field (example: 100px)
Click “Save”
Note: If you are not seeing the row height change after saving, it may be that your content within the row will not allow the row size to be decreased further.
Adding padding and spacing (alignment)
A key part of your table display is proper alignment and spacing of your content. This includes;
Cell padding = the space around your content within each cell
Cell spacing = the space between cells in your table
Vertical alignment = the position of content vertically in your cell (top, middle, bottom)
Horizontal alignment = the position of content horizontally in your cell (left, center, right)
Take the steps below to adjust padding and alignment:
Go to edit the text block or email containing your table
Go to Table > Table properties
Enter a value for “Cell spacing” and/or “Cell padding” (example: 5px)
To add cell padding to individual cell, place your cursor in the cell and go to Table > Cell > Cell properties
Click “Save”
Note: Once padding/spacing/alignment has been added to your entire table, you can edit the individual cell properties and remove code from the advanced tab as needed. We suggest having knowledge of basic code if making changes in this fashion.
Adding a background color or image
Background colors or images can be added to the entire table, rows, or individual cells. The background color can be added within the properties area of the table, row, or cell, while a background image requires pasting some code. Take the steps below to add a background color:
Go to edit the text block or email containing your table
Place your cursor in the table
Use the ‘Table’ dropdown and select “Table properties”
Visit the “Advanced” tab and select a background color (or enter a specific color code)
Click “Save”
Similar changes can be made to rows or cells as shown below
Note: To add a background image, you will need the following code to your table styles:
background-image:url('insertURLhere')Adding table border and styles
A table border can help make your table look cleaner on the website and help separate your content more effectively. Eventsforce provides out of the box options to customize your table border in terms of style and colors. Take the steps below to edit your table border:
Go to edit the text block or email containing your table
Place your cursor in the table
Use the ‘Table’ dropdown and select “Table border styles”
Repeat as needed until all columns are added
Click “Save”