Inserting a Table
To insert a table:
- Place the cursor where you'd like the table to appear, and then click the Insert/Edit Table button () in the editor. The Insert/Modify Table dialog appears:
- Class - allows you to choose a predefined style for the table. View examples of all the table styles.
- Cols - The number of vertical columns.
- Rows - The number of horizontal rows.
- Summary - A short summary of the table's content can be added for low/no-vision users who're browsing with special devices.
- You can also add a Table caption. Scrolling horizontally to the middle of the Table Properties dialogue box, click Advanced, & check this option.
- Click Insert.
Editing a Table
To edit an existing table, don't click the Insert/Edit Table button in the editor—that just creates a new table. Instead,
- Right-click (Ctrl-click on a Mac) the table itself in the layout. The editor's context-sensitive menu should appear:
Select an action or properties dialog. Available options include Cell, Row, and Column options, as well as Table Properties, where you can edit the parameters entered when the table was first created.
If applicable, enter desired info, and click OK.
Alternately, you can edit a table using the buttons available in the TinyMCE text editor:
- Insert Row Before
- Insert Row After
- Delete Row
- Insert Column Before
- Insert Column After
- Delete Column
- Split Merged Cells
- Merge Cells
Making a Table "Responsive"
Tables can be as small or large as needed to contain the data within its rows and columns. This can be a challenge when tables are large (very wide), since such tables may not fit on a viewer's computer screen without forcing a horizontal scroll bar for the entire browser window. This can make viewing cumbersome on small devices like tablets and smartphones.
The solution to this problem is to make a table "responsive", which allows the table to adapt to fit the viewers' screen, without affecting the rest of the page. This adaptation consists of a scroll bar being added just for the table (and not the entire page), and only when such a scrollbar is needed.
To make a table responsive (requires editing HTML):
- While editing the page with the table, click the HTML button on the visual editor.
- In the source code window that appears, find the opening <table> tag for the table you want to make responsive.
- Add a class called "responsive" (i.e. <table class="responsive">). If a table already has a class or classes associated with it, simply add responsive as an additional class (i.e. <table class="table table-bordered responsive">).
- Click OK, and then Save the page.
Deleting a Table
To delete an existing table, do one of the following:
- Place the cursor directly after a table and hit backspace.
- Right-click the table and select Delete Table.