XHTML Forms - Web Development and Design Foundations with XHTML - page 375

Styling Forms with Tables and CSS
XHTML Tables Meet CSS Properties. This is considered to be a transitional
approach. In this method, the form is organized by a table configured with CSS rather
than with XHTML properties. While this is not completely table-less design and your
instructor may be aghast at this suggestion, using a table to configure a small portion of
a page that otherwise utilizes CSS is an alternate method to consider. It would be best
to reserve the use of a table for pure tabular data—such as price lists and budgets.
However, the purpose of this example is to show how CSS can be used to streamline
even the XHTML needed by a table. Figure 9.22 shows a Web page (see
Chapter9/form1.html in the student files) with the form area coded with a table.
Figure 9.22
This page uses a
table styled with
CSS
The table is configured with CSS rather than with XHTML attributes. CSS is used to
configure the <table> and <td> properties that would otherwise be defined with
XHTML attributes. CSS is also used to configure a class to right-align the text on the
form.
The CSS follows:
table { border: solid 3px #000000;
width: 100%;
}
td { padding: 5px;
}
.myLabel { text-align: right;
}
In the following XHTML code, the <table> and <td> tags have no attributes for table
properties since these are all configured with CSS. The XHTML follows:
<form method="post">
<table>
<tr>
<td class="myLabel" ><label for="myName">Name:</label></td>
<td><input type="text" name="myName" id="myName" /></td>
</tr>