Turn the Tables with AR5
The table module allows you to create richly formatted HTML tables on your website using a straightforward interface that includes a variety of features and controls. Tables are a great way to show information that would otherwise be challenging to present clearly.
The Basics
A newly-created table includes two columns and two rows. You can add content to the table directly by clicking on a cell and typing. Clicking on a cell once will highlight the cell text, and clicking on it second time will place your editing cursor inside the cell text. The current cell appears with a blue outline, and the cell that your cursor is hovering on appears with a green outline.
While working within a cell, you can use keyboard shortcuts to make text bold (Ctrl/Cmd + B) or italic (Ctrl/Cmd + I), and you can also use the tab key to move to the next cell. If at the end of a row, the tab key will take you to the first cell in the next row, creating a new row if there isn't one. You can move from cell to cell quickly, in any direction you wish, using Ctrl/Cmd + arrow keys (depending on OS and application settings, you may find that the Cmd/Ctrl + arrow keys are bound to other functions, and may have to experiment to find key the combinations that work for you).
The Toolbar
The toolbar, which sits directly above the editable table, allows you to control cell formatting, edit the structure of the table, and access the advanced cell editor.
- The first two sets of buttons in the toolbar allow you to control the horizontal and vertical alignment of text. Horizontal alignment applies to the current cell only, while vertical alignment applies to all the cells in the same row as the current cell.
- You can add and remove columns and rows using the third set of buttons in the toolbar.
- The last button in the toolbar opens the advanced cell editor.
See the screenshot below and the following lists for information about the controls available in the toolbar.
The Advanced Cell Editor
The advanced editor gives you access to rich formatting options, a link wizard, and an image field, which you can use to edit the contents of a cell. You can open the advanced editor for the current cell by clicking the rightmost button in the toolbar, which is labeled with a pencil icon. While open, the advanced editor occupies the entire table module card, helping you to focus on the cell that you're working on. When you're finished, click the green "done" button in the lower-left corner of the module card. You'll be returned to the table editor and will see your changes to the cell in context of the table. Note that, at this point, you must still click "save" to store the changes that you made to the cell using the advanced editor.
The advanced editor should be pretty familiar to you already—it's just a section without the heading fields. That means you can use all the features that you're used to from the section's WYSIWYG editor, including the link wizard and source view. To create a heading, put the text that you want to use as a heading on its own line, highlight it with your cursor, and select a heading from the formatting selector (the leftmost item in the WYSIWYG toolbar).
The advanced editor also includes the section's image box. Use it to add an image to a cell just as you would add one to a section. You can also add a link to your image using the link button next to the image box.
Unlike an image in a section, however, an image in a table cell cannot be positioned or sized with respect to the other content in the cell. The table will attempt to size columns and images automatically to accomodate large images, finding an average width that fits the table, whereas small images will be shown at their natural size. Text always appears beneath the image in a cell.