Table of Contents Previous Section

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.

  1. Delete the WOStrings below the horizontal line in the Main component, because you'll be replacing them with a table.

  2. Choose from the Elements pop-up list to display table elements.

  3. Click the button.

    A table with two rows and two columns appears.

  4. Click the icon at the upper right of the table.

    A third column appears, and the columns are equally spaced.

  5. Select the upper-left cell of the table by clicking it.

    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.

  6. Double-click the upper-left cell.

    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.)

  7. Change the text in the cell to Name.

  8. Open the Inspector.

    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.

  9. Click the Header Cell checkbox.

    The text in the cell becomes bold and centered. (However, you don't see the changes until you begin editing another cell.)

  10. In the Width box, enter 150 in the field marked "pixels" and press Enter.

    The width of the column is set to 150 pixels.

  11. Click in the component window, then press Tab.

    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.

  12. 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.)

    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