revUp - Updates and news for the LiveCode community
Issue 135 | June 15th 2012 Contact the Editor | How to Contribute

How do I display a table in a field?
The new field features in 5.5 allow you to embed simple tables directly into your text fields and alter their appearance.

by Elanor Buchanan

This step by step guide shows you how to embed a table in your field and configure its layout just the way you want it.

The sample stack

Create a new stack, add a field, name it "Display" and add some tab separated data to the field.

If you like you can also include some text before and after the data to be displayed in a table.

Creating the grid

To create the grid set the hGrid and vGrid properties of the lines of the field which make up the table.

set the hGrid of line 2 to -2 of field "Display" to true
set the vGrid of line 2 to -2 of field "Display" to true

The hGrid property causes 1 pixel width grid lines to be placed before and after any line with it set to true. The vGrid property causes 1 pixel width grid lines to be placed between each tab position and forces text to clip to tab width in a cell-like fashion.

Make the table fixed width

Now to make the table 'fixed width' we make sure the tabWidths finishes with a zero-width tab.

This has two effects:
    the vertical grid lines will stop at the zero-width tab
    the left and right sides of the table determine the location of paragraph borders, filling and alignment.

set the tabWidths of line 2 to -2 of field "Display" to 30,30,30,30,30,30,30,0

Adding spacing before and after the table

Now we want to add some spacing between the text paragraphs and the table.

set the spaceBelow of line 1 of field "Display" to 10
set the spaceAbove of line -1 of field "Display" to 10

Adding a border to the table

To add a border to the table as a whole we set the borderWidth of all the lines in the table. When in hGrid mode, borders
of adjacent lines which have compatible properties are elided into a 1-pixel grid line.

set the borderWidth of line 2 to -2 of field "Display" to 2

Adding indentation

You can add an indent to the left or right of the table by setting the leftIndent or rightIndent property of the lines of the field that make up the table.

set the leftIndent of line 2 to -2 of field "Display" to 20

Adding padding

You can add padding to the cells of field by setting the padding property.

set the padding of line 2 to -2 of field "Display" to 5

About the Author

Elanor Buchanan is a Senior Software Developer for RunRev Ltd.

 

Main Menu

What's New

Get the LiveCode Academy DVD Today