Support > Tutorials > Inserting and Editing Tables

Inserting and Editing Tables

How to insert a table

  1. Use the Table tool in the toolbar to add a table.
  2. Go to Insert Table and select the amount of rows and columns.
  3. Use the small squares to drag and make the table bigger.
  4. Add your content.
  5. From the toolbar, go to Table > Table properties, and remove the width and height. These were added when you made the table bigger in step 3, but they make the table unresponsive. Remove the width and height after you have added your content to allow the table to adjust responsively for mobile.

How to align text at the top of each table cell

By default, table cell content will align in the middle. To make them align at the top:

  1. In the editor, click into the cell.
  2. From the toolbar menu, go to Table > Cell > Cell Properties.
  3. Set the V Align to Top.
  4. Click Ok.
  5. Do this for all table cells.

How to make a table cell wider (and prevent logos/images from appearing really small)

In some cases where there is a lot of text in one cell, but not in the adjacent cell, you may get a very narrow column. To make the column wider, specify a width on the first cell.

  1. In the editor, click into the cell.
  2. From the toolbar menu, go to Table > Cell > Cell Properties.
  3. In the width field, add 100. You can change this to a desired width.
  4. Click Ok.
  5. Adjusting just the first cell should adjust the width for all the cells in the first column.

How to make equal width and height cells that have images

As the screen shrinks from desktop size to tablet to mobile, images within cells will adjust differently and may become misaligned at the bottom.

To align each cell at the bottom, a percentage width needs to be placed on each cell of the first row. Being a responsive layout, this gives it a boundary to follow for every screen size. If your table has 3 columns, add 33.333% to the top three cells within Cell Properties

How to add table borders

  1. In the editor, click anywhere into the table.
  2. From the toolbar menu, go to Table > Table Properties.
  3. Next to Border, add 1.
  4. When finished, click submit.

How to add cell padding

  1. In the editor, click anywhere into the table.
  2. From the toolbar menu, go to Table > Table Properties.
  3. Next to Cell padding, add 10.
  4. When finished, click submit.
  5. Submit and Preview the page.
  6. You may need to hard refresh when viewing a new change (Ctrl + F5).
  7. If you do not see the styles, contact Exware to add them.

How to Add Alternating White/Grey Style to Table

  1. After creating your table, click on Edit in the toolbar, and then Source code.
  2. Within the code, find the opening and closing table tags
  3. Above the opening table tag, add the table-responsive class.
  4. After the closing table tag, add the closing div.
  5. This wraps the table in a class, called table-responsive. Custom styles can then be added to that one table, such as background colours and borders.
  6. When finished, click Ok
  7. Note: The styles won't appear in the editor, but they will on the website.
  8. Submit and Preview the page.
  9. You may need to hard refresh when viewing a new change (Ctrl + F5).
  10. If you do not see the styles, contact Exware to add them.

How to center a table

Within the editor, select all of the cells. You can do this by triple-clicking the outside border of the table until they are all highlighted. Then go to Formats, alignment, and center.

Tips

  1. If you're making a table of logos, crop the whitespace out of each logo before uploading, and resize them to be around the same size. This creates a more uniform look.
  2. Make sure there is no whitespace within the table cells. Place your cursor within each cell, use your arrow keys to find any, and then backspace.

Topics

google (5 items)
RSS (3 items)
SEO (3 items)
plug-in modules (28 items)
IT (9 items)
best practices (5 items)
visual tutorial (29 items)
security (3 items)
data handling (7 items)
fundamentals (3 items)
graphic design (19 items)
web protocols (9 items)
programming (48 items)
html formatting (7 items)
POD (32 items)
events (8 items)