Creating a Table to Display the Output
In the first chapter, you created three WOString elements to display the information the guest entered. In this task, you'll create a different type of element, an HTML table, to display the information. In later tasks, you'll display data for multiple users in the table.
- Delete the WOStrings below the horizontal line in the Main component, because you'll be replacing them with a table.
- Choose from the Elements pop-up list to display table elements.
- Click the button.
- Click the icon at the upper right of the table.
- Select the upper-left cell of the table by clicking it.
- Double-click the upper-left cell.
- Change the text in the cell to Name.
- Open the Inspector.
- Click the Header Cell checkbox.
- In the Width box, enter 150 in the field marked "pixels" and press Enter.
- Click in the component window, then press Tab.
- Repeat steps 7 through 11 for the second and third cells of the top row. Label the middle column E-mail and set its width to 150 pixels. Label the third column Comments and leave its width unset. (The comments field takes up the remainder of the width of the table.)
A table with two rows and two columns appears.
A third column appears, and the columns are equally spaced.
There are two modes for table editing: content-editing mode, which lets you change the text in a cell and add other elements to it; and structure-editing mode, which lets you perform operations on a cell such as splitting it in two. The cell you just selected is now in structure-editing mode.
You can now edit the contents of the cell. If you want to resume structure editing, click in the toolbar, which allows you to toggle between modes. (Alternatively, you can hold down the Control key and click in a different cell to enter structure-editing mode.)
The Inspector presents a number of modifiable settings that apply to the table cell you've selected. Note also that the top row of the Inspector window shows the element path, which includes the cell, the row it is contained in, and the table itself. Selecting any of those allows you to set specific properties of the elements.
The text in the cell becomes bold and centered. (However, you don't see the changes until you begin editing another cell.)
The width of the column is set to 150 pixels.
Pressing Tab when editing a table causes the contents of the next cell to the right to be selected (or the first cell of the next row if in the rightmost column). Pressing Shift-Tab moves in the opposite direction through the table.
Note: It isn't necessary to adjust the height of the columns, since they expand at run time to accommodate the size of the text being displayed.
Table of Contents Next Section