Pages

Creating a custom layout with Tables? Use this article as a guide when making a table with the WYSIWYG content editor inside Ekklesia 360.

Note: Some table styling preferences (border colors, cell padding, etc) are predefined as a design decision made by your web designer. Some preferences available in the WYSIWYG editor may not apply to your table without help from your web designer.

If you need a tip that is not found here, let us know by contacting Support.

Achieving consistent spacing

To get consistent spacing in table cells, avoid adding returns or spaces inside cells for the sake of spacing one row or element from another. Instead, select all cells and apply a Width or Height with the "Table Cell Properties" button.

Setting the width of a column

To set the width of a given column, select all rows in the column and click on "Table Cell Properties". Set the cell Width. This will apply a width to all selected cells, setting the width of the column.

Stretching out all cells lengthwise

If all table cells seem scrunched together lengthwise, a quick fix is to open the Table options with "Insert/edit Table" and apply a Height to the entire table.

Paragraph text wrapping around tables

If text of following paragraphs wraps around a table, be sure to turn off any alignment from the table itself. Aligning the table will apply the CSS "float" rule which could allow subsequent text to wrap.

Table columns stretched by images

Images that are too wide for a table's column will always stretch the column to fit. To prevent this, edit the image with the "Insert/edit Image" button and set the Appearance of the image to a smaller size.

Creating asymmetrical layouts

To add a new row or column in one cell only, first add a new row or column with the "Insert Row" / "Insert Column" buttons, then selectively merge the appropriate cells with the "Merge Table Cells" button. By doing this, you can ultimately create a table where a particular cell is divided into separate rows or columns.

Tiny spaces between cells

If you prefer table all cells to be touching each other, yet have a slight margin between them, your web designer may need to add "border-collapse:collapse" to the CSS rules for the <table> element.