You are not logged in so you may not be able to see some or all of the content on this page. Please return to your u3a website and login first, then reload this page.

Inserting a Table

The Insert Table icon allows you to insert a table onto the webpage. Clicking on the icon displays the window below:


Hover your mouse over the grid to select the number of rows and columns you want your table to have. (These will be shown in grey with a pop-up showing the dimensions, similar to inserting a table in MS Word). Once you have the required dimensions, left-click your mouse. You can edit the number of rows and columns in your table later if needed.

This will insert a small table onto the page, where your cursor is positioned. Now ‘grab’ the boxes at the corners or sides of the table to ‘stretch’ it to the size you require. Note that in doing so the heights and widths of each row and column will be maintained the same. You will be able edit and format these later if required.

You can now enter data into each cell. When you insert text it will automatically wrap within a cell and increase the row height accordingly. Again, you can adjust this later, as described below.
Below the grid is a set of icons that enable you to modify your initial table. Hovering your mouse over each will display a pop-up describing its function.

Table Wizard opens another window, and allows you to create a table directly from there using the functions that are described under the Table Properties icon below. It is however recommended that you follow the instructions here to create your table, rather than using Table Wizard.
The first row of icons below this allow you to add or delete rows and columns within an existing table.
The first five icons in the second row of icons (at the bottom) allow you to merge or split cells within an existing table. Before using any of these first ensure you have your cursor in the cell/row/column you wish to amend.
Note that you can also access all these functions (and Table Properties & Cell Properties) by right-clicking a cell in your table to reveal the set of options available.
Table Properties icon. This is the final icon in this row (bottom right). It opens a window with four tabs:
• Table Properties
• Cell Properties
• Table Layouts
• Accessibility
These enable you format or reformat aspects of an existing table, eg that you have created via the grid described above.
Table Properties tab
This displays a grid showing the current arrangement of the table, ie x columns by y rows. To the right of this grid are fields that allow you to change the table properties, but NOTE that changes made here will apply to the whole table.
Below the grid, ‘Columns + -‘, ‘and Rows + -‘ will add or delete columns and rows in the table; ‘Column Span + -‘, and ‘Rows Span + -‘ will merge or separate cells in columns and rows in the table.
To the right of the grid:
Height and Width allow you to set the dimensions of all the cells in the table (by specifying their height & width). It is preferable to use pixels (px) as the unit of dimension for these.
Cell Spacing will add space (in pixels) between the cells in the table.
Cell Padding will add space (in pixels) between the text and the border of the cells.
Alignment determines the alignment of the table on the webpage: left, centre or right. The default (X) is ‘left’.
Back Colour allows you to choose a background colour for the table.
Please do not change the CSS Class. Leave this as ‘Apply Class’.
Back Image allows you to insert an image (previously uploaded via Image Manager) as a background to the table, but you will need to size the image appropriately (proportionate to the overall table dimensions) before doing this.
More Cell Styling … allows you to change various attributes for the Font, Background, Text, Layout, Box, Border, and Lists (bullet points, etc) in the cell. Most of the options here should be familiar to those who have used word processing and similar software.

Cell Properties tab
This displays the same grid as in the Table Properties tab but by clicking on a particular cell in a row or column you can change the properties of that specific cell/row/column, by using the fields on the right.
For instance if you want to change the width of just the second column, click on the cell in the first row of that column, and select the width in the Width field. If you want to change the height of just the third row, click on the first cell in that row and select the height in the Height field.
You can alter the horizontal and vertical alignment of text in specific cells: left, centre, right; top, centre, bottom, using the window that opens with the ‘down arrow’ to the right of the Alignment box. The default (X) is ‘top left’.
Back Colour allows you to choose a background colour for a cell.
Please do not change the CSS Class. Leave this as ‘Apply Class’.
Back Image allows you to insert an image (previously uploaded via Image Manager) as a background to the cell, but you will need to size the image appropriately (proportionate to the cell dimensions) before doing this.
Do not enter anything in the ID field.
If you don’t want text to wrap in the cell then check the box next to ‘no text wrapping’.
More Cell Styling … allows you to change various attributes for the Font, Background, Text, Layout, Box, Border, and Lists (bullet points, etc) in the cell. Most of the options here should be familiar to those who have used word processing and similar software.

Table Layouts tab
There are three table style options available via the drop-down in the Select Table Style box. You will see a preview of each in the pane on the left.
• No Table Style Selected – this is the default and is an unformatted table allowing the user to format it as required
• sm-Table-1 and sm-Table-2 are pre-formatted tables which also allow the user to select whether the ‘special formats’ apply to any or all of the Heading Row, Last Row, First Column, Last Column.

Accessibility tab
Here you can add a caption for your table and choose how to display it – left, centre, right, at the top or bottom of the table. The caption will take up the top or bottom row.
You can also select which row and/or column will show (in bold) as a heading.

Page last updated on: 07/04/2023 14:32