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.

The sample stack

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

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

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

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

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

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

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

4 Comments

Daniel

I don't know where to put this code, i can only figure out how to run code via handlers like mouse down etc. Putting this code in the script of the field does nothing, i assume it doesnt run unless its called by something. So where does this script go?

Hanson Schmidt-Cornelius

Hi Daniel,

yes, you could put the code into an event handler. You could add the code into a function or command, or you could execute the code from the message box. As the lesson does not describe exactly where the code should be added, I would recommend using the message box. This would also be a good exercise that helps you get used to some more of the features of the development environment.

You should see an icon with the text "Message Box" on the top panel of the IDE. Select that to open a dialogue.
You can use the top line of the dialogue to pass LiveCode syntax directly to LiveCode.

Type in a line of syntax and hit "Enter".

Kind Regards,

Hanson

zlgo

This example crashes IDE in ver 7.0

Elanor Buchanan

Hi

Thanks for letting us know, I just tested it out here in Windows 7 and I didn't experience the crash, could you let us know what OS and version of LiveCode you are using so we can investigate.

Thank you.

Elanor

Add your comment

E-Mail me when someone replies to this comment