Using Tables in Content
A Table can be used to organize to your content cleanly and concisely with or without a grid being displayed. A properly constructed table will allow you to position your content without having to edit the html code of your page.
When you are creating content for your site, it essential that you keep in mind what your content will look like on a mobile device. A large table with fixed dimensions will cause issues for mobile device visitors of your site. It is recommended that you do not use a Table for Mobile or Responsive content, but if you must then please adhere to the guidelines listed below.
Inserting a Table within Page Content
A Table can be inserted within any page that has an editable area in its layout. A table is constructed based on the table properties that you configure for it. In order to insert a Table within your content you will need to follow these steps:
- From your Content Tree, select the page you wish to edit.
- Click within the Content Area of the page and select the Table tool button from the Content Editor toolbar.
- From the Table Properties window, you will need to configure the following properties:
Rows
|
Enter in the number of rows the table will have. |
Columns
|
Enter in the number of columns the table will have. |
Width
|
This property will control the width of the table but should be left blank to avoid Fixed Dimensions. |
Height
|
This property will control the height of the table but should be left blank to avoid Fixed Dimensions. |
Headers:
|
This property will allow you to dictate if the first Row, Column or Both are Headers for the tabe. |
Border Size:
|
This property will allow you to dictate if your table and cells will have a border encompassing them or not. A zero value equals no border whereas 1 pixel or higher will give you a border of your desired size. |
Alignment:
|
This property will allow you to align the table to the left, center, or right of a content page |
Caption:
|
This property will allow you to enter text to be displayed as the title of the Table. |
Summary:
|
This property will allow you to enter in a description of the table to be entered which is only visible to Administrators |
Cell Spacing
|
This property will allow you state the distance in pixels between the lines of the border for your table. Must be used in conjunction with Border Size. |
Cell Padding:
|
This property will allow you to state the distance in pixels between your content inside of the table and the table border. |
- Click on the OK button once you are satisfied with the properties in order to insert the table.
Inserting Content into a Table
Once you have inserted a table into a page, you can now begin entering in your content into the table. Text and/or images can be inserted into any of the cells of the table.
Note: When inserting images into a table ensure that the image dimenions have either been edited prior to being uploaded, or have been edited within the Media Libraries themselves. For more information on uploading and inserting images, please view the Using Images in Content help page.
Once you have started entering in content within the cells of a table, you will notice that the cells will adjust according to the content contained within them. You can control the properties of each individual cell by completing the following steps:
Main Dining Room Hours
| Monday to Friday |
9:00am - 8:00pm |
| Saturday |
8:00am - 10:00pm |
| Sunday |
7:00am - 9:00pm |
- Right-click on any cells within the table and the Cell -> Cell Properties menu item.
- From within the Cell Properties window you will be able to configure the following properties:
Width
|
This property will determine the width of cell. This property should be left blank to avoid Fixed Dimensions within the table. |
Height
|
This property will allow you to dictate the height of the cell. This property should be left blank to avoid Fixed Dimensions within the table. |
Word Wrap
|
This property will allow you to dicate if the text within the cell should wrap to a new line or extend the width of a table. |
Horizontal Alignment
|
This property will allow you to dictate the horizontal alignment of content within a cell. The default setting is middle. |
Vertical Alignment
|
This property will allow you to dictate the vertical alignment of content within a cell. The default setting is center. |
Cell Type
|
This property will allow you to dictate if the text within the cell is just text or if it should be treated as a header. |
Rows Span
|
This property will allow you to dictate the number of rows within a table, a cell will span across. |
Columns Span
|
This property will allow you to dictate the number of columns within a table, a cell will span accross. |
Background Color
|
This property will allow you to dicate the background color of a cell |
Border Color
|
This property will allow you to dictate the color of the border of a cell |
- Once you are satisfied with the configuration of the Cell Properties, click on the OK button to save the changes.
Main Dining Room Hours
| Monday to Friday |
9:00am - 8:00pm |
| Saturday |
8:00am - 10:00pm |
| Sunday |
7:00am - 9:00pm |