info.okova.com - Text Toolbar

Tables are a very powerful mechanism for layout and presentation - both of data but also of images.

Mastering the following functions will benefit your website immensely.

Button icon

Name

Description

Create Table

A new table will be inserted in the document at the position of the cursor when clicking on the

button.
Immediately after clicking on

you will be presented with a grid from which you select the initial size of the table.
Here is a screenshot of the grid in its initial state :

As the cursor is moved over this grid the background colour is highlighted as deep red. The cells which are highlighted represent the size of the table about to be created. If we, for example, move the cursor to the fourth cell along and second cell down we see the following grid :

The table to be created is thus four cells wide, and two cells high.

When the highlighted region is of the correct size, just click to activate it.

In this instance the table being created initially looks as follows :

If you require a larger table - or wish to change its dimensions at a later point, do not panic!

Clicking within the table (placing the cursor in one of its cells) when in editing mode adds some extra control icons around the table border. For example, clicking in the second cell on the top row results in the table appearing as follows :

Notice the two controls :

and

.

The horizontal control

relates to columns. Clicking on the arrow on its right will add a table column to the right of the cell with the cursor. Likewise, clicking on the arrow on its left will add a table column to the left of the cell with the cursor. To delete the column containing the cursor, click on the "circle with cross" inbetween the two arrows.

The horizontal control

relates to rows. Clicking on the top arrow will add a table row above the cell with the cursor. Likewise, clicking on the bottom arrow will add a table row beneath the cell with the cursor. To delete the row containing the cursor, click on the "circle with cross" inbetween the two arrows.

Table Background

To change the background colour of a table cell, place the cursor in that cell, click on

which brings up a palette grid. Choose the colour you want and the background colour will change. Here we have set the background colour to a light yellow.

Table Borders

A borders dialog appears when you click on

. This dialogue box is shown below.

The upper horizontal rows represent tables, where the grey outline is their border thickness. Moving the cursor over these pseudo tables changes their border to red (helping you to see their thickness). In the picture above, the mouse cursor is over the fourth table down.When you have found the correct thickness, just click.
Here is a series of 1x1 tables (with a yellow table background) with the different border sizes :

The bottom four squares relate to the lines within the table itself. Choosing the leftmost square turns off all internal lines. Choosing the second square leaves only horizontal lines. Choosing the third square leaves only vertical lines. Choosing the final square turns on all internal lines. For example, here is a series of 4x4 table using the four options for inner lines :

Column Width

A column width dialogue will appear after clicking on

. The initial dialogue is shown below:

This function applies to the column in which the cursor was resting as the

was clicked.

To select a different width for the column, simply move the mouse over the dialogue and watch the column size change. For example, in the picture below the mouse is towards the center of the dialogue, which has changed to display 40% width. Click when you are happy with the selected width.

It attempts to make the selected column the selected percentage width of the table. If the content of a cell in that column is, however, larger than the selected width the column will ignore the width instruction and expand. For example, shown below are three tables. Table 1 is a 1x2 table in normal mode. In Table 2 we have set the second cell to have only 10% width. Table 3 shows that when we put in content that requires more than 10% width the cell expands regardless of the instruction.

Table 1

Table 2

Table 3

alongerwordthanthecell

Align Top

Where one cell in a row is taller than another it forces a decision to be made about where the content of the shorter row should be placed. These alignment functions allow you to chose which vertical alignment should be used. We shall explain by example using the following test table, whose second column is longer than the first :

Col1	Col2 qwe rtz uio plk jhg fds ayxx cvb nm

In the table above the cell containing "Col1" has been vertically aligned at the top of its cell by clicking on

Align Middle

Col1	Col2 qwe rtz uio plk jhg fds ayxx cvb nm

Using the same demonstration table as for Align Top, the cell containing "Col1" has been vertically aligned at the middle of its cell (as is the default) by clicking on

Align Bottom

Col1	Col2 qwe rtz uio plk jhg fds ayxx cvb nm

Using the same demonstration table as for Align Top, the cell containing "Col1" has been vertically aligned at the bottom of its cell by clicking on

Tutorial :

You might wish to make a table of products. Simply creating a, for example, 3x3 table - using the top row for column headings, results in the following table.

Product	Description	Price
Buccaneer	Dust and waterproof sealing when mated. Low and high speed bus connection, 1.5Mbs to 480Mbs.	x
IEC Connectors	A full range of qualitz, mains rated inlets, outlets and connectors conforming to IEC and EN60320 specifications. The combinations of mounting styles and terminations include : flange fixing, snap to panel and PCB mounting versions together with 2.8/solder tabs, 4.8 and 6.3 faston tabs, screw terminal and PC spill versions.	y

Whilst functional, it is ugly.

With just a few clicks we can turn it into the following more attractive table :

Product	Description	Price
Buccaneer	Dust and waterproof sealing when mated. Low and high speed bus connection, 1.5Mbs to 480Mbs.	x
IEC Connectors	A full range of qualitz, mains rated inlets, outlets and connectors conforming to IEC and EN60320 specifications. The combinations of mounting styles and terminations include : flange fixing, snap to panel and PCB mounting versions together with 2.8/solder tabs, 4.8 and 6.3 faston tabs, screw terminal and PC spill versions.	y

Make the column headings background a deep red using ,
Select the column heading cells and change their text colour using ,
Select the first column and align its text centrally using , repeat for the last column,
Set the width of the first column by placing the cursor in one of its cells and setting the width to 20% using
Set the width of the price column by placing the cursor in one of its cells and setting the width to 10% using