Work with tables

If you need to display data or other information in a tabular format, the Page Editor allows you to insert and manipulate 

1. Click the "Edit" icon

Next to each page in the Page Manager page list, there is a pencil icon which opens the page for editing. Simply click this icon next to the page you wish to edit.

2. Choose the location of the table

Choose where you would like to insert the table by clicking inside the editor at the correct place. The flashing cursor (insertion point) will be displayed - you can always use the cursor keys to move it to the exact location. In the example below, we are going to insert the table after the existing content in the page, and have already pressed the "centre" button to ensure the table appears in the middle of the page.

3. Click the "Table" button

Simply click the table toolbar button in the Page Editor, as shown on the left, to open the "Table Properties" window.

4. Configure the table

The "Table Properties" window allows you to specify a number of configuration options for the table. These are outlined below.

  • Rows. The Number of horizontal lines of cells in the table.
  • Columns. The number of vertical lines in the table.
  • Width. The amount of horizontal space the table will occupy. This can either be in pixels, or as a percentage of the available space.
  • Height. The same as width, but for the vertical size of the table. Usually you will wish to leave this blank, as the table will grow as rows are added to it.
  • Headers. Allows you to specify if the first row, first column, or both is created as a header. This usually means that the text within these cells is emboldened and centred, but can vary depending on the style applied to your website.
  • Border size. Allows you to define the thickness (in pixels) of the border around each cell of the table. Set to 0 to specify no border.
  • Cell spacing. The gap (in pixels) left beween each cell of the table.
  • Cell padding. The gap (in pixels) between the boundary of the cell and the content inside it.
  • Align. As with the image alignment options, allows you to specify where the table lies in relation to the content of the page. Leave as "<not set>" to keep the default.
  • Caption. A title which is displayed directly above the table.
  • Summary. Good for browsers which cannot display tables, as well as search engines, a concise text summary of what the table represents.

When you are happy with the options you have specified, click "OK" to create the table. In the example below, we have created a table with 4 rows, 4 columns, a width of 450 pixels, cell spacing of 3, cell padding of 6, border size of 2 and with a caption of "This is my new table".

After creating the table, you can change most of the configuration options by right-clicking anywhere inside the table and selecting "Table Properties". With the exception of the Rows, Columns and Caption options, you can change everything that was available when you initially created the table.

5. Populating the table

To add data to the table, simply click inside each cell and enter the text (or insert an image, link, etc) as required. In the example below we have added data to each column in a diagonal line.

In this example, we have used the "centre" and "right" alignment options in the Page Editor, to show that each cell can be treated just like it is a paragraph in its own right.

6. Manipulating cells and columns

Note that in the above example the cells have changed size to accomodate the content that has been entered. Sometimes, this may be what you require, but in a data table you may wish to have consistent cell widths. In this case, we can configure the cells to behave the way we want.

To edit a cell's properties, right-click inside the cell, hover over the "Cell" option, and then choose "Cell Properties".

The "Cell Properties" window offers a range of options for fine-tuning how each individual cell in the table appears:

  • Width. The width of the cell, either in pixels or as a percentage of the width of the table. This will effectively define the width of the column in which the cell is situated.
  • Height. The height, in pixels, of the cell and hence the row in which it is situated.
  • Word Wrap. If set to "Yes" (which is recommended) the cell will allow its contents to wrap when it is two wide for the designated width of the column. If set to "No", there will be no breaks in the content of the cell, which can force it to break the layout of the table by stretching the cell's width.
  • Horizontal Alignment. Whether the content of the cell is left, centre, or right-aligned.
  • Vertical Alignment. Whether the content of the cell is aligned to the top, middle, or bottom of the cell.
  • Cell Type. Switch the type between Data and Heading. This is generally just for cosmetic reasongs.
  • Rows Span. Defines how many rows the cell takes up. By default, the cell takes up a single row, but this can be set to a higher number to extend it vertically into adjacent rows of the table.
  • Columns Span. The same as Rows Span, but working on horizontally.
  • Background Color. Click the "Choose" button to select a colour for the background of the cell.
  • Border Color. Click the "Choose" button to select a colour for the border of the cell.

In the example below, we have taken the original table and set the width of each of the cells in the top row to 25% (thus distributing them evenly throughout the table) and the background colour of one of the cells to light yellow.

7. Adding rows and columns

It is very possible that you will need to extend the table over time as more data is required. To add a new row, right-click in a cell in the row either above or below where you wish to insert the new row, hover over the "Row" option and choose one of the "Insert" options. In the example below, we will add a row to the bottom of table.

New columns can be added in the same way, by using the options in the "Column" sub-menu.

 

Keep up with our news Sign up now