</tr>
<tr>
<th><span class="required">*</span> <label for="sex" accesskey="G">Gender:</label></th>
<td>
<select name="sex" id="sex">
<option value="">[Select] </option>
<option value="m">Male</option>
<option value="f">Female</option>
</select>
</td>
</tr>
<tr>
<th><span class="required">*</span> <label for="yid" accesskey="Y">Yahoo! ID:</label></th>
<td><input type="text" value="" id="yid"> <span class="b">@yahoo.com</span><br />
<span class="explain">ID may consist of a-z, 0-9, underscores, and a single dot (.)</span></td>
</tr>
<tr>
<th><span class="required">*</span> <label for="pw" accesskey="P">Password:</label></th>
<td>
<input type="password" value="" id="pw" /><br />
<span class="explain">Six characters or more; capitalization matters!</span>
</td>
</tr>
<tr>
<th><span class="required">*</span> <label for="pw2" accesskey="R">Re-type password:</label></th>
<td><input type="password" value="" id="pw2"/></td>
</tr>
<tr>
<th></th>
<td><input type="submit" value="Submit" class="submit"/> <input type="reset" value="Reset" class="submit"/></td>
</tr>
</table>
</form>
CSS部分:
* {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
}
input,select {
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
}
.required {
font:0.8em Verdana !important;
color:#f68622;
}
.explain {
color:#808080;
}
.b {
font-weight:bold;
font-size:12px;
}
.democss table{
font:11px/12px Arial, Helvetica, sans-serif;
color:#333;
width:420px;
}
.democss caption {
display:none;
}
.democss th {
font-weight:normal;
text-align:right;
vertical-align:top;
padding:4px;
padding-top:8px;
width:110px
}
.democss td {
text-align:left;
padding:4px;
width:294px;
}
.democss input {
width:180px;
}
.democss select#content {
width:185px;
}
.democss input.submit {
width:70px;
}
具体演示: