In the past, tables were often used as a formatting tool, to create complex layouts and columns within rows, with images aligned with text in sophisticated ways.
The problem with doing this is that your page will NOT be responsive to mobile devices. The table layout locked in specific widths and heights and did not allow your text and images to dynamically reconfigure themselves based on the device being used.
Tables are no longer recommended for this purpose. Instead, for a responsive design, use the predefined row layout feature.
Tables are still available in the editor but they should be used for tabular data only!
To insert a table at the current cursor position or to format an existing table, click the Table icon on the bottom row of the toolbar.
To create a table, drag your mouse over the boxes at the top of the popup to specify the number of rows and columns you need. Release the mouse to see the table. (If you need more than 8 rows or 8 columns, create the table with the maximum number, then use the Insert row or Column function to insert additional rows or columns. You can also adjust rows and columns on the Table Properties screen.)
To highlight a table, click the border until you see selection boxes appear around the border. When you right click the mouse, the following popup menu appears:
Select Show/Hide Border to specify whether the border lines for the table and the cell as a whole are displayed. Select Table Properties to display the Table Properties dialog (see below). Select Delete Table to remove the table.
Table Properties
In the Dimensions section, specify the overall dimensions of the table using pixels or as a percentage of the page size. (Note that these settings may be overwritten if the content in each cell forces the table to be wider or taller.)
In the Layout section, specify the cell spacing and padding (in pixels), default alignment, and background color.
- Cell Spacing is the number of pixels separating one cell from those on either side of it. It is the extra space inserted between the border lines of the cells. A cell spacing of 0 places the internal borders of adjacent cells on top of each other.
- Cell Padding is the number of pixels between the border of a cell and the text or images within that cell. Think of it as the internal margin on all four sides within the cell. A cell padding of 3 pixels often gives a pleasing look to your table.
Click the Style Builder button to create more complex style effects.
The Border section provides a graphic controller to specify which cells should have borders. Color and thickness can also be specified. If you specify a thickness of 0, the borders will not be shown. A common setting is Border=0, Cell Padding=3 and Cell Spacing=0. This makes the table invisible but allows you to use it as a powerful alignment tool for text.
This dialog has some additional functions:
- Click the Table Design tab to modify the number of rows and columns in the table graphically.
- Click the Cell Properties tab to modify the properties of individual cells graphically. More information about cell properties is below.
- Click the Accessibility Options tab to specify options that will make your table accessible to people with disabilities using your website.
Cell Properties
This dialog allows you to select a cell and then explicitly specify the height and width of the cell in pixels or as a percentage of the table (not the overall page width.) Note again that these settings may be ignored if the cell's contents (especially an image) are too big to fit within the prescribed size.
Select the Content Alignment option to control how text is aligned within the cell. Select Background to change the background color of the cell. Select the Style Builder option to display another dialog that controls the complete set of style options within the cell.
The No Text Wrapping property tells the system not to wrap text within a specified width but instead, to expand the cell dynamically to accommodate the text entered into it. Note that this setting is ignored if the text is wider than the page minus the width of other cells or text in the same row.
When the cursor is positioned inside a table, and you right-click the mouse, you will see a popup screen with the following options.