Table of Contents 
Previous Section
Optional Exercise
You can tidy up the user interface even further by putting the query part of the page in a table to match the editing part of the page. Also, you should consider capitalizing Main.wo's text field labels.To put the query part of the page in a table, follow these steps:
- Put the cursor inside the form element before the "title" text field.
- In the Tables toolbar, click the
button to add a table.
- Inspect the new table.
- In the Table Inspector, choose Unspecified for the table width.
- Also in the Table Inspector, set the border to 0 to remove the appearance of a border.
- Click the
button in the lower left of the table to add a new row to the table.
- Type the labels Title:, Category:, and Rating: in the cells in the first column.
- Cut and paste the query text fields into their corresponding table cells.
- Delete the old query field labels.
A table with two rows and two columns appears. Initially the table spans the entire width of the page. You'll resize it later.
When the table is first added, it's in structure-editing mode. You can tell it's in structure-editing mode because it has 
buttons for adding rows and columns and because it has 
and 
icons around each of the table's rows.
The table resizes to just fit its contents. When you change the cell contents later, the table will resize again to accommodate the new values.
Recall that to put the table into content-editing mode, click the 
button or double-click in one of the table's cells.
The table doesn't resize to accommodate new cell content until you're done typing; that is, until you move the cursor out of the edited cell.
Just click on a text field to select it. When a text field is selected, it displays with a gray "shadow."
Now edit the text labels in the editing part of the page and put any other finishing touches on the page that you want. The finished component might look something like this:
Table of Contents 
Next Section