Anchor

HTML Editor

The HTML atom includes a simple HTML editor tool.  This will expose the HTML that comprises the field being edited.

Atom Boxing

If you would like to quickly highlight or isolate the text that is contained by your HTML Atom, the Atom Boxing function may be of use to you.

Atom Boxed

Tick this if you want the Atom to be boxed.

Atom Icon Image

Select an Image from the back end of the website and this will appear at the top left hand corner of the atom as a Box Identifier

Atom Title

This text will appear at the top of the Atom / box

Boxing Background

There are three options for putting colour as the background of the Atom / box.  We have provided two pre-configured options.  Alternatively you can set up /pick your own colour by selecting the Custom Background option. 

Custom Boxing Background

Click the drop down arrow to open the standard colour picker and select a colour you require for your Atom background.

Custom Boxing Label Background

Click the drop down arrow to open the standard colour picker, to select a colour that will display behind the image you select for the top left hand corner of the atom.

Insert / Edit Widget

Insert / Edit Function

Background Colour

HTML Editor TABLE Tab

The layout of pages and technical information is often suited to a table structure.  You can use this feature of the HTML Editor to add and configure tables.

Note, when a table is added to a page, clicking on the table will result in additional table formatting tools appearing under this Tab;

The Table Group

The Table group provides buttons that control the Table you have added

Visual Aid.

Similar to the Toggle HTML Guides, this button will expose any tables in the HTML atom that are present but don't have any borders set to display;

When the Visual Aid is switched off, the table has no borders, it will effectively be invisible.  If you click on the table, all you will see is;

Insert Table

This button opens a form that provides the settings to configure a new table.  The form has two tabs, General and Advanced.

Most (common) Table configuration actions are provided under General tab;

Columns

Set the number of columns you require in your table.

Rows

Set the number of Rows you want for your table.

Cell Padding

The Cell Padding is the gap between the cell wall and the content inside the cell 

Cell Spacing

The cell spacing attribute specifies the space, in pixels, between cells. Note: Do not confuse this with the cellpadding attribute, which specifies the space between the cell wall and the cell content.  The cellspacing attribute of a cell is not supported in HTML5.

Alignment

This attribute sets how the contents of a cell are aligned within the cell space.

All Borders

Click the checkbox at the end of this row and you will be enabled with the ability to set the properties for the borders of ALL of the tables cells. 

The individual settings are for;

1. The width (in pixels) of the border

2. The Width units of the border.  If px not selected then the pixel setting will disappear Width unit options are;

Border line options - px.  The width of the border in pixels.  This selection will enable the number thickness setting option.

Border line options - Medium Specifies a medium border - this is the default

Border line options - thin Specifies a thin border

Border line options - thick Specifies a thick border

Border line options - length Allows you to define the thickness of the border

Border line options - initial Sets this property to its default value. Example, set the text colour of the <div> element to red, but keep the initial colour for <h1> elements

Border line options - inherit Inherits this property from its parent element. Example, set the text-colour for <span> elements to blue, except those inside elements with class="extra":

3. The Colour of the Table / cell borders can be set to any required variation, using the standard XPOR colour picker control.

When setting the colour using the colour picker, remember to click the Tick button when you have made your selection.

Left Border

As above but specific to the Left Border of cells. 

Top Border

As above but specific to the Top Border of cells. 

Right Border

As above but specific to the Right Border of cells.

Bottom Border

As above but specific to the Bottom Border of cells. 

Width

The width of the table can be set as pixels.  In the screenshot below, the user is setting the table to be 800 pixels wide.  It will be fixed to this, and will not react to the viewing screen size.

Alternatively you can;

1. set the table to occupy a percentage of the screen (width) that is viewing it.  Then, when the screen is adjusted or the table is viewed on a different device, the table will adjust accordingly.

2. set the table to fit exactly into anything it is contained in (e.g. a <div>)

3. set the width to NONE - this is being deprecated.

4. set the width to be automatically calculated by the browser.

Height

Sets the height of the Table.  Most of these options result in the table calculating its' height.  Only the Pixel (px) option will set the height of a table to be restricted.

Class

You can select a style sheet Class to configure the table.  This will override any of the settings described above.  Please refer to the Help Resourcees for "Themes" and "Stylesheets" for further guidance. 

Table Caption

Not currently enabled. 

The Advanced Tab provides access to additional functions requiring a little more knowledge on HTML and website styles.

Id

You can give the table an ID - which can subsequently be used to locate the table from other web pages.

Style

If you are using a style sheet approach to controlling how our table is presented, you can select your pre-prepared Style Sheet here. 

Language Code

XPOR can handle multi-lingual web pages.  You can select a language code to be applied to the table, such that this language character set is used by default on the table.  

Language Direction

Set this to control the direction in which the characters are read / presented in the table.

Background Colour

Use this set a background colour for the Table

Background Type

Use this to set whether you want to have an image as the background to your table.  You can select if you want this to be an internal (stored in XPOR) image or an external image - from another website, or no image at all (default).  Note that this feature does not scale the image to fit the table.  In the event that the image is larger than the table, it will be cropped.  Likewise if the image is smaller than the table, it will be repeated to fill in the table.

Table Quick Link function.

Some of the table editing functions are presented to the editor as soon as the table is clicked.  This provides rapid access to the key functions.  Note, each tool button has a mouse-over description to assist in selection of the appropriate function.

 These functions mirror the functions described in this Help Resource but with slightly differnet details editing forms.

Table Group - Edit Table

This button re-opens the form that was used to create the Table (as above).  However, it has the Row / Column count disabled.  You cannot add rows or columns to the table as you did when you first set up the table.  You must now use the subsequent buttons (see below).

Table Group - Delete Table

This button will entirely delete the selected table.

Cells Management Group - Edit Cell

This button will open the same editing functions described above - but for the selected table cell. this is a 

One variation of note is that this is where you can select how the cell handles VERTICAL alignment.

Cells Management Group - Merge Cells

There are two methods for merging table cells.  Firstly you can click into a Cell and click the Merge Cells button.  This will open a small form;

Set the number of cells you want to merge, starting with the selected cell and moving to the left or beneath the selected cell.

The number is set to 1 by default.  This will not merge any cells - 2 is the number to merge TWO cells together etc.

The alternative method is to click the first cell you wish to merge and drag across / down to the subsequent cells to select all cells you wish to merge.  Then click the Merge Cells button.  This will merge the selected cells.

 Cells Management Group - Split Cells

You can use this tool to split cells into multiple other cells, either vertically or horizontally.

Rows Management Group

Use these buttons in this group to add or delete Rows in your table

Columns Management Group

Use these buttons in this group to add or delete Rows in your table.