Adding an HTML table around screen elements
| Summary | Sometimes it can be hard to arrange elements exactly as you want on a web screen if there are several elements or loops in play. This article will step through neatly storing several elements of a loop on a merged screen in a html table. |
| to | AskiaDesign |
| Written for | Survey programmers, Scripters |
| Keywords | Html table, Classic responses, Label, Merged screens, Loop, Header, Body, Edits, Question label, Screens, Web screens, Styles, Combo box, Vertical question table, Horizontal question table, Cell, Row, Header |
Download the example QEX file here.
You might start with something like this:
Generate your screens as normal:
We will need to make manual amendments to CH_NAME, CH_GENDER, CH_AGE, SC14A.
Open the screen CH_NAME > right-click anywhere in the screen > Select all.
Right-click anywhere > Styles > Vertical question table.
Open screen for CH_GENDER > right-click > Select all > right-click > Styles > Combo box.
Repeat this for screen SC14A. Now, highlight all four screens in the tree on the left > Merge.
Delete the three question text elements highlighted below:
Line up the element as in the following screenshot - you may find the options boxed in red below useful for doing this:
In IE preview this doesn't look great yet so we have to add some settings to adjust:
Now, insert a label between the question text and the response elements and put some syntax in which will create your html table. You need the right number of columns created, the correct header text and also, you need to set the sub-form position of this label to be 'Header'. You can adjust width % to be what you like depending on what needs to be displayed.
The first preview of this will show your table as follows:
The number of rows in your table is defined by the number you enter in the first question (it's set with routing into the loop).
This technique allows flexibility for positioning elements into groups. e.g. below you can put group headers in any code-frame (A) or line up several loops in one page into groups (B):
