HTML Layout Cleanup? - html

Question

I making a jsp which ncludes 5 jsp's all together. On my 4th one..it's operational but.. my design looks a lil clunky. Can you point out any suggestions to make it look better or cleaner? Any suggestions would be appreciated. Thanks
CSS
table.det
{ }
table.det td
{
border: none;
}
fieldset.det
{
display:block;
float:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
margin-top:20px;
margin-left:20px;
border:2px solid #CCCCCC;
}
fieldset.det legend
{
padding:2px 5px;
border:2px solid #CCCCCC;
}
jsp:
<tr>
<th>
<span onclick="toggleDiv('filtering', 'filterImg')" style="cursor: hand;">Filters <img name="filterImg" src="../images/minus.gif" /></span>
</th>
</tr>
<tr>
<td>
<div id="filtering" style="display:block;">
<table class ="det">
<tr>
<td>
Workload Year: <select size="1" name="wYearSelect">
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option selected value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>
Fiscal Year: <select size="1" name="wYearSelect">
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option selected value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>
Condition Code: <select size="1" name="condCodeSelect">
<option selected value=""> </option>
<option value="2007">A</option>
<option value="2008">B</option>
<option value="2009">C</option>
<option value="2010">D</option>
<option value="2011">E</option>
<option value="2012">F</option>
<option value="2013">G</option>
<option value="2014">H</option>
</select>
Customer: <select size="1" name="customerSelect">
<option selected value=""> </option>
</select>
Repair Facility: <select size="1" name="repFacSelect">
<option selected value=""> </option>
</select><br/>
Work Type: <select size="1" name="workTypeSelect">
<option selected value=""> </option>
<option value="10">Rebuild</option>
<option value="11">IROAN</option>
<option value="12">SOAR</option>
<option value="13">Special</option>
</select>
Special Indicator: <select size="1" name="specIndSelect">
<option selected value=""> </option>
<option value="RST">RESET</option>
</select>
WBS: <select size="1" name="wbsSelect">
<option selected value=""> </option>
<!-- etc -->
</select>
<br/>
Appropriation: <select size="1" name="appropSelect">
<option selected value=""> </option>
</select>
MWSLIN: <input type="text" name="mwslin" value=""/>
Serial #: <input type="text" name="mwslin" value=""/>
<input type="checkbox" name="include_carryover">Include Carryover</input>
</td></tr><tr><td>
<fieldset>
<legend>Standard Materiel filter structure here</legend>
NSN: <input type="text" name="nsn" value=""/>
TAMCN: <input type="text" name="tamcn" value=""/>
PGD/Group: <input type="text" name="pgd" value=""/>
SAC : <select size="1" name="condCodeSelect">
<option selected value=""> </option>
<option value="2011">1</option>
<option value="2012">2</option>
<option value="2013">3</option>
</select>
<br/>
Nomenclature: <input type="text" name="nomen" value=""/>
</fieldset>
</td></tr><tr><td>
<fieldset class="det">
<legend>Source of Repair</legend>
<input type="checkbox" name="sorCodes" value="A">MCA </input>
</fieldset>
<fieldset class="det">
<legend>Schedule Type</legend>
<input type="checkbox" name="schedType" value="1">Regular</input><br/>
<input type="checkbox" name="schedType" value="2">Lot Job</input><br/>
<input type="checkbox" name="schedType" value="3">Batch Job</input>
</fieldset>
<fieldset class="det">
<legend>Workload Type</legend>
<input type="checkbox" name="workloadType" value="1">SMC Workload</input><br/>
<input type="checkbox" name="workloadType" value="2">Other Workload</input>
</fieldset>
<fieldset class="det">
<legend>Closure Level</legend>
<input type="checkbox" name="workloadType" checked value="1">Open</input><br/>
<input type="checkbox" name="workloadType" value="1">Physically Complete</input><br/>
<input type="checkbox" name="workloadType" value="2">Financially Complete</input>
</fieldset>
</td></tr></table>
</div>
</td>
</tr>
<tr>
<td align="center">
<button name="Generate Report" value="Generate Report">Generate Report</button>
<button name="Clear Criteria" value="Clear Criteria">Clear Criteria</button>
</td>
</tr>

Answer 1

At a first glance, getting rid of the tables would be somewhere to start if you can.
I am headed to work will look over it more thoroughly there.
Cheers!
EDIT - You could take out the border on your fieldset.det legend, it should cascade down from fieldset.det
On your div id=filtering, couldn't you add the extra styling to the filtering id?
EDIT - Here is something I threw together, not saying it is ANYWHERE near perfect. It gives you a div layout and ways to easily change the layout through CSS. Also, check out this site for best form practices, http://blog.sherpawebstudios.com/2009/06/17/top-10-html-form-layout-best-practices/.
CSS:
#wrapper{ width: 1040; overflow:hidden; }
#filter {
cursor: hand;
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.formLabel {
font-weight: bold;
text-align: right;
width: 160px;
float: left;
}
.field {
float: left;
}
.content:before,
.content:after {
content: "";
display:table;
}
.content:after {
clear: both;
}
/*IE 6/7 */
.content { zoom:1;margin-bottom: 10px;}
.subset {
float: left;
margin: 0 15;
}
.subset div.formLabel {
width:100px;
}
#generate {
margin-right:15px;
}
HTML:
<div id = "wrapper" >
<div id = "filter" class ="clearfix">
<span onclick="toggleDiv('filtering', 'filterImg')">Filters <img name="filterImg" src="../images/minus.gif" /></span>
</div>
<div class = "content">
<div class = "formLabel">
Workload Year:
</div>
<div class = "field">
<select size="1" name="wYearSelect">
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option selected value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>
</div>
</div>
<div class = "content">
<div class = "formLabel">
Fiscal Year:
</div>
<div class = "field">
<select size="1" name="wYearSelect">
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option selected value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>
</div>
</div>
<div class = "content">
<div class = "formLabel">
Condition Code:
</div>
<div class = "field">
<select size="1" name="condCodeSelect">
<option selected value=""> </option>
<option value="2007">A</option>
<option value="2008">B</option>
<option value="2009">C</option>
<option value="2010">D</option>
<option value="2011">E</option>
<option value="2012">F</option>
<option value="2013">G</option>
<option value="2014">H</option>
</select>
</div>
</div>
<div class = "content">
<div class = "formLabel">
Customer:
</div>
<div class = "field">
<select size="1" name="customerSelect">
<option selected value=""> </option>
</select>
</div>
</div>
<div class = "content">
<div class = "formLabel">
Repair Facility:
</div>
<div class = "field">
<select size="1" name="repFacSelect">
<option selected value=""> </option>
</select>
</div>
</div>
<div class = "content">
<div class = "formLabel">
Work Type:
</div>
<div class = "field">
<select size="1" name="workTypeSelect">
<option selected value=""> </option>
<option value="10">Rebuild</option>
<option value="11">IROAN</option>
<option value="12">SOAR</option>
<option value="13">Special</option>
</select>
</div>
</div>
<div class = "content">
<div class = "formLabel">
Special Indicator:
</div>
<div class = "field">
<select size="1" name="specIndSelect">
<option selected value=""> </option>
<option value="RST">RESET</option>
</select>
</div>
</div>
<div class = "content">
<div class = "formLabel">
WBS:
</div>
<div class = "field">
<select size="1" name="wbsSelect">
<option selected value=""> </option>
</select>
</div>
</div>
<div class = "content">
<div class = "formLabel">
Appropriation:
</div>
<div class = "field">
<select size="1" name="appropSelect">
<option selected value=""> </option>
</select>
</div>
</div>
<div class = "content">
<div class = "formLabel">
MWSLIN:
</div>
<div class = "field">
<input type="text" name="mwslin" value=""/>
</div>
</div>
<div class = "content">
<div class = "formLabel">
Serial #:
</div>
<div class = "field">
<input type="text" name="mwslin" value=""/>
</div>
</div>
<div class = "content">
<div class = "formLabel">
Include Carryover:
</div>
<div class = "field">
<input type="checkbox" name="include_carryover"></input>
</div>
</div>
<div class ="content">
<div class = "subset">
<h3>Standard Material filter structure here</h3>
<div class = "content">
<div class = "formLabel">
NSN:
</div>
<div class = "field">
<input type="text" name="nsn" value=""/>
</div>
</div>
<div class = "content">
<div class = "formLabel">
TAMCN:
</div>
<div class = "field">
<input type="text" name="tamcn" value=""/>
</div>
</div>
<div class = "content">
<div class = "formLabel">
PGD/Group:
</div>
<div class = "field">
<input type="text" name="pgd" value=""/>
</div>
</div>
<div class = "content">
<div class = "formLabel">
SAC :
</div>
<div class = "field">
<select size="1" name="condCodeSelect">
<option selected value=""> </option>
<option value="2011">1</option>
<option value="2012">2</option>
<option value="2013">3</option>
</select>
</div>
</div>
<div class = "content">
<div class = "formLabel">
Nomenclature:
</div>
<div class = "field">
<input type="text" name="nomen" value=""/>
</div>
</div>
</div>
<div class = "subset">
<h3>Source of Repair</h3>
<div class = "formLabel">
MCA
</div>
<input type="checkbox" name="sorCodes" value="A"></input>
</div>
<div class = "subset">
<h3>Schedule Type</h3>
<div class = "formLabel">
Regular
</div>
<input type="checkbox" name="schedType" value="1"></input><br/>
<div class = "formLabel">
Lot Job
</div>
<input type="checkbox" name="schedType" value="2"></input><br/>
<div class = "formLabel">
Batch Job
</div>
<input type="checkbox" name="schedType" value="3"></input>
</div>
<div class = "subset">
<h3>Workload Type</h3>
<div class = "formLabel">
SMC Workload
</div>
<input type="checkbox" name="workloadType" value="1"></input><br/>
<div class = "formLabel">
Other Workload
</div>
<input type="checkbox" name="workloadType" value="2"></input>
</div>
<div class = "subset">
<h3>Closure Level</h3>
<div class = "formLabel">
Open
</div>
<input type="checkbox" name="workloadType" checked value="1"></input><br/>
<div class = "formLabel">
Physically Complete
</div>
<input type="checkbox" name="workloadType" value="1"></input><br/>
<div class = "formLabel">
Financially Complete
</div>
<input type="checkbox" name="workloadType" value="2"></input>
</div>
</div>
<button name="Generate Report" value="Generate Report" id="Generate">Generate Report</button>
<button name="Clear Criteria" value="Clear Criteria">Clear Criteria</button>