Tables are used in various applications to help organise images and text within a cell layout. This makes it easy to neatly align things such as price lists, profiles/attributes, and even allows you to have more freedom over image position amongst other images and text.
This article gives an introduction to using tables with your Freestart package specifically.
1. Setting up the table
It is recommended to work with a blank paragraph before applying a table to an existing paragraph within your page. Click within the main text box of the page and then select the Insert/Edit Table button (1) located at the top of the text box.
A pop-up box will now appear with various options allowing you to customise your table. Here is a brief overview of what each option relates to:
Click on the titles below for an example of each attribute
Rows (2) allows you to specify how many rows across you wish to have in your table.
Example 1:
| This is a table consisting of one row/cell |
Example 2:
| This is a table consisting of three rows |
| |
| |
Columns (3) allows you to specify how many columns down you wish to have in your table.
Example 1:
| This table consists of |
one row and two columns |
Example 2:
| This table... |
|
|
| |
...consists of three rows... |
|
| |
|
...and three columns |
Border Size (4) allows you to specify the depth of the table border.
Example 1:
| This table consists of |
a border of 1 |
Example 2:
| This table... |
|
|
| |
...consists of... |
|
| |
|
...a border of 5 |
Example 3:
| This table consists of... |
|
| |
....a border of 0 |
Alignment (5) allows you to set the alignment for the table only.
Example 1:
| This table... |
|
| |
|
| |
...is left aligned |
| This table is right aligned |
| |
| |
Example 2:
| This table... |
|
| |
|
| |
...is left aligned |
This text will now appear to the right of your table...
...and will wrap around the table once the bottom has been reached. You can continue to enter your text as normal without interfering with the position of the table. Therefore, the table will always remain in position within the paragraph.
Example 3:
| This table... |
|
| |
...is centre aligned |
Width (6) allows you to specify the overall table width in pixels or percent.
Example 1:
| This table... |
|
| |
...is 600 pixels wide |
Example 2:
Height (7) allows you to specify the overall table height in pixels.
Example 1:
| This table... |
|
| |
...is 400 pixels high |
Example 2:
| This table is 600 pixels high |
| |
Cell Spacing (8) allows you to specify the outer padding of the table cells.
Example 1:
| This table... |
|
| |
...is set to cell spacing 3 |
Example 2:
| This table is set to cell spacing 20 |
| |
Cell Padding (9) allows you to specify the inner padding of the table cells.
Example 1:
| This table... |
|
| |
...is set to cell padding 5 |
Example 2:
| This table is set to cell padding 15 |
| |
Caption (10) allows you to specify a heading that appears above the table.
Example:
This is the table caption
| This is the main... |
|
| |
|
| |
...table contents |
Summary (11) is used for people with screen readers and allows you to specify a brief summary for the table contents. Nothing is displayed visually for this on the actual page.
Example:
| This table has a summary applied to it |
Once you have finished specifying the details for your table, click on the Ok button to create the table. Clicking Cancel or the small X in the top right corner will close the box without creating the table or saving any changes.
2. Modifying the table
You can modify the table any time by right clicking on the table with your mouse. The dropdown list will now appear allowing you to modify certain aspects of the table (12).
Here is a closer look at the dropdown box along with a brief overview of what each of the options does:
Click on the titles below for an example of each attribute
Cut (13), Copy (14), and Paste (15) allow you to respectively perform these actions on the contents of the cell and will only be highlighted if the contents are selected first.
Cell (16) allows you to edit the cells individually. Click here for more information on this menu
Insert Cell Before (16a) and Insert Cell After (16b) creates a blank cell either before or after the cell you have selected.
Delete Cells (16c) deletes any cells you have highlighted. The contents of these cells will also be deleted in the process.
Merge Cells (16d) will combine any cells you have highlighted into one cell. You will only be able to do this with cells next to each other.
Split Cell Horizontally (16e) will turn the cell into two columns, wherease Split Cell Vertically (16f) will turn the cell into two rows.
Cell Properties (16g) will bring up a properties box containing more information regarding editing the cell/s. Click here for an overview of this section.
Click on the titles below for an example of each attribute
Width (16h) allows you to set the width of a single cell in either pixels or percent. You will need to ensure all cells within the row add up to the total table width if specified in point (7) above.
Example 1:
This cell is set to 100 pixels wide
|
This cell is set to 75 pixels wide
|
This cell is set to 50 pixels wide |
Example 2:
| This cell is set to 25% wide |
This cell is set to 50% wide |
This cell is set to 25% wide |
Example 3:
This cell is set to 100 pixels wide
|
This cell is set to 30 pixels wide
|
This cell has no width set, so it will automatically add up to the total table width specified.
In this case, this table is set to 400 pixels, so the cell will not exceed 240 pixels (400-100-60=240) when content is added. |
Height (16i) allows you to set the height of a single cell in pixels.
Example:
This cell is 30 pixels high |
This cell is 90 pixels high |
| This cell is 60 pixels high |
| This cell is 90 pixels high |
This cell is 45 pixels high |
| This cell is 45 pixels high |
Word Wrap (16j) allows you to limit the width of a table cell in relation to the table width, preventing it from wrapping onto another line.
Example:
| this cell doesnt have any text wrapping applied |
this cell does have text wrapping applied to it |
Horizontal Alignment (16k) and Vertical Alignment (16l) allows you to change the alignment of the cell contents only.
Example:
This cell is aligned top-left |
This cell is aligned middle-baseline |
| This cell is aligned middle-centre |
| This cell is aligned bottom right |
This cell is aligned middle-right |
| This cell is aligned middle-centre |
Rows Span (16m) allows you to set the number of cells the individual cell will span down length ways.
Example:
| This cell has a row span of 3 |
This cell doesnt have row span |
This cell has a row span of 2 |
| This cell doesnt have row span |
| This cell doesnt have row span |
This cell doesnt have row span |
Columns Span (16n) allows you to set the number of cells the individual cell will span across width ways.
Example:
| This cell has a column span of 3 |
| This cell doesnt have row span |
This cell doesnt have row span |
This cell doesnt have row span |
| This cell doesnt have row span |
This cell has a column span of 2 |
Background Colour (16o) gives you the option to select a colour for the cell background. A colour swatch will appear when you click on the Select button.
Border Colour (16p) gives you the option to select a colour for the border of the cell. A colour swatch will appear when you click on the Select button.
Example:
| |
|
|
| |
The borders may not display in all browsers |
|
| |
|
|
Row (17) allows you to edit the rows in the table individually. You have the option of inserting a row before or after the selected rows along with deleting the selected row and all of its contents in one go.
Column (18) allows you to edit the columns in the table individually. You have the option of inserting a column before or after the selected columns along with deleting the selected column and all of its contents in one go.
Delete Table (19) will completely delete the table and all contents within there.
Table Properties (20) will bring up the table properties box that appeared when you originally clicked the Insert/Edit Table button back in point (1).
Once you have finished with creating/editing the table, click on the Update button (green arrow) to save and publish the changes to your page.
For more information on the use and application of tables on your pages including examples, please click here to view the next article.