HTML and CSS Reference
In-Depth Information
Figure 9.17
A table was used to
format this form
A table with five rows and two columns was added to the page in Figure 9.17, within
the
<form>
and
</form>
container tags. The text labels for the
Name:
,
E-mail:
, and
Phone:
form elements were each placed in their own table cell and right-aligned. Each
text box and button was placed in its own table cell. The scrolling text box was placed
in a table cell that spans two columns. (See Chapter 8 to review tables.) The table was
configured to have no border and to take up 75 percent of the browser window. The
first column was configured to take up 10 percent of the table width. The revised
XHTML for the form and table is shown here with the table code in color. Notice that
since a table is used to format the form, fewer
<br />
tags are needed.
<form>
<table border="0" width="75%">
<tr>
<td align="right" width="10%">
Name:
</td>
<td>
<input type="text" name="CustName" id="CustName" size="30" />
</td>
</tr>
<tr>
<td align="right">
E-mail:
</td>
<td>
<input type="text" name="CustEmail" id="CustEmail" />
</td>
</tr>
<tr>
<td align="right">
Phone:
</td>
<td>
<input type="text" name="CustPhone" id="CustPhone"
size="15" maxlength="12" value="###-###-####" />
</td>
</tr>
<tr>
<td colspan="2">
Question or Comments:<br />
<textarea rows="4" cols="60" name="CustComment"
id="CustComment">Please type your question or comment
here</textarea></td>
</tr>
<tr>
<td align="right">
<input type="submit" value="Submit" />
</td>
<td>
<input type="reset" />
</td>
</tr>
</table>
Search WWH ::
Custom Search