Tables

There is so much you can do with tables and so many settings that it is difficult to know where to start. We will go over the basics and a few of the settings, but not all. The best piece of advice we can give you is to try it yourself - experiment.
When you work with tables, it is a good idea to use Firefox This web browser just seems to make it easier. You should know that the layout in Internet Explorer is different so the instructions in this manual may not look exactly the same.
A heads up. Working with tables can be time consuming, but the end result is excellent so it is time well spent.

Insert Table

To insert a table in the text field, place the cursor where you want your table and click on the insert table button:

This box will appear:

Decide how many columns and rows you need. The Alignment setting is for allowing text and images to the right or left of the table (the same setting used in Insert images). Avoid this function if you can. It can be tricky to get right since the table becomes "movable" so that text and images fit alongside it. That said, it is a great setting to be used for what it is intended for - if you can’t find another solution. But use it only when necessary and think twice about whether you really need it.

A piece of advice that makes it easier to work with tables...
When you have inserted the table, click on the Save button for the text field. When you then go to editing mode again, you will notice a space has been added to all the cells making them a little bigger and easier to work in the table.

Table instead of several spaces and tabs

The best reason for using tables is that they are much better than typing many spaces and tabs cannot be used at all in a website. This is because the underlying HTML code does not know what a tab is. If, for instance, you have a list with several columns, your best option is to create a table and arrange the information in the table. This is useful for pricelists, product sheets, menus, address lists, and more.

Warning for several spaces. Don’t do it; the results can be crazy. What happens is that in HTML speak, this becomes a non-breaking space and this code can cause a lot of problems.
It is much better to use tables instead.

For example:

The table contains 3 columns and 5 rows. There is a blank column in the middle to make it easy to adjust the space between the texts.
A soft gray border runs around the cells making it easy for you to see what the table looks like. When you make your table, you do not need to put borders around the cells.

So, let’s make our table presentable.

Look at "address". Height-wise, it appears in the middle of the cell. This is standard when you insert a table. You can change the setting so that text and images appear at the top. Right-click on a cell, go to Cell and follow the arrow to Table Cell Properties. Click on "Top" under "Vertical Alignment". Go down and check that your preference should apply to all cells in the table. Click on the Update button.

The setting that lets you change all the cells in the table is great, but only use it when you start creating your table. Decide what settings should apply for all or most cells and enter these as early as possible. Keep in mind that this setting copies everything from the cell you right-clicked in to all the other cells. This means that anything special, like width, height, typeface, and so on will be copied. Make sure you only use this setting in the beginning before you start making the individual settings for the various cells.

Say you’d rather have the colon symbol aligned under each other. Place the cursor in each cell for name, address, phone, and so on and click on the right align button in the toolbar.
This is what happens.

Say you want the name, address, phone, and so on in a slightly bolder text.
The end result looks like this (notice that the gray border is gone):

What if you want to add a picture of the person in front of the data? Make a table with 5 columns. Imagine two columns in front of the above table. The first column is for the picture, then one for space, and then comes the rest.

To merge all the cells in the first column into one single cell, mark all the cells in column 1, right-click, go to Cell and then to the alternative Merge Table Cells.

Insert the image in the new big cell (column 1) by clicking on the button Insert Image:
Read more here.

Here are four other examples of when tables are a good alternative.

Images and text side by side

Background color for text

Wall calendars / Calendars

Genealogical table / Family tree