Use table to layout form controls : form « Form « HTML / CSS
- HTML / CSS
- Form
- form
Use table to layout form controls
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
table {
border-collapse: collapse;
color: black;
border: 1px solid black;
}
th {
width: 200px;
text-align: right;
vertical-align: top;
border-top: 1px solid black;
font-family: Verdana;
font-size: 0.7em;
padding-right: 12px;
padding-top: 0.75em;
padding-bottom: 0.75em;
}
td {
vertical-align: middle;
background-color: #333333;
border-bottom: 1px solid white;
color: white;
border-left: 4px solid gray;
padding: 4px;
font-family: Verdana;
font-size: .7em;
}
.required {
color: red;
}
.header th {
text-align: left;
text-transform: uppercase;
font-size: .9em;
}
.header th {
text-align: left;
text-transform: uppercase;
font-size: .9em;
padding-left: 220px;
}
.header th {
text-align: left;
text-transform: uppercase;
font-size: .9em;
padding-left: 220px;
border-bottom: 2px solid gray;
border-top: 2px solid black;
}
#buttonSubmit {
margin-left: 220px;
margin-top: 4px;
}
</style>
</head>
<body>
<table cellspacing="0">
<tr class="header">
<th colspan="2">Account Information</th>
</tr>
<tr class="required">
<th scope="row">Login Name*</th>
<td><input name="uname" type="text" size="12" maxlength="12" /></td>
</tr>
<tr class="required">
<th scope="row">Password*</th>
<td><input name="pword" type="text" size="12" maxlength="12" /></td>
</tr>
<tr class="required">
<th scope="row">Confirm Password* </th>
<td><input name="pword2" type="text" size="12" maxlength="12" /></td>
</tr>
<tr class="required">
<th scope="row">Email Address*</th>
<td><input name="email" type="text" /></td>
</tr>
<tr class="required">
<th scope="row">Confirm Email*</th>
<td><input type="text" name="email2" /></td>
</tr>
<tr class="header">
<th colspan="2">Contact Information</th>
</tr>
<tr class="required">
<th scope="row">First Name* </th>
<td><input name="fname" type="text" size="11" /></td>
</tr>
<tr class="required">
<th scope="row">Last Name* </th>
<td><input name="lname" type="text" size="11" /></td>
</tr>
<tr class="required">
<th scope="row">Address 1*</th>
<td><input name="address1" type="text" size="11" /></td>
</tr>
<tr>
<th scope="row">Address 2 </th>
<td><input type="text" name="address2" /></td>
</tr>
<tr class="required">
<th scope="row">City* </th>
<td><input type="text" name="city" /></td>
</tr>
<tr class="required">
<th scope="row">State or Province*</th>
<td><select name="state">
<option selected="selected" disabled="disabled">Select...</option>
<option value="alabama">Alabama</option>
</select></td>
</tr>
<tr class="required">
<th scope="row">Zip*</th>
<td><input name="zipcode" type="text" id="zipcode" size="5" maxlength="5" /></td>
</tr>
<tr class="required">
<th scope="row">Country*</th>
<td><input type="text" name="country" /></td>
</tr>
<tr class="required">
<th scope="row">Gender*</th>
<td> <input type="radio" name="sex" value="female" /> Female
<input type="radio" name="sex" value="male" /> Male
</td>
</tr>
<tr class="header">
<th colspan="2">Misc. Information</th>
</tr>
<tr>
<th scope="row"> Annual Household Income </th>
<td>
<select name="income" size="1" >
<option selected="selected" disabled="disabled">Select...</option>
<option value="notsay">I'd rather not say</option>
</select> </td>
</tr>
<tr>
<th scope="row">Interests</th>
<td><input name="interests" type="checkbox" value="shopping-fashion" /> Shopping/fashion
<input name="interests" type="checkbox" value="sports" /> Sports
<input name="interests" type="checkbox" value="travel" /> Travel</td>
</tr>
<tr>
<th scope="row">Eye Color</th>
<td><input name="eye" type="checkbox" value="red" /> Red
<input name="eye" type="checkbox" value="green" /> Green
<input name="eye" type="checkbox" value="brown" /> Brown
<input name="eye" type="checkbox" value="blue" /> Blue Gold</td>
</tr>
</table>
<input type="submit" name="Submit" value="Submit" id="buttonSubmit" />
<input type="reset" name="Submit2" value="Reset" id="buttonReset" />
</form>
</body>
</html>
Related examples in the same category