I’m trying to create a form that clients would complete via the web, so far I’ve resorted to using various tables butted up against each other to get the view I’m looking for, one of the issues is that when the tables are next to each other the borders appear twice as thick.
I think I could probably turn certain borders on and off but this would be a pain to manage, is there a better way I should be doing this?
My form looks something like this (jsfiddle at http://jsfiddle.net/5AXKa/)
<html>
<head>
<style type="text/css">
#form table
{
width:100%;
}
td
{
border: 1px solid black;
}
table
{
border:1px solid black;
}
#form
{
width:1000px;
/*border:1px solid black;*/
}
.field
{
border-right:none;
}
table, tr, td
{
border-collapse:collapse;
}
#Logo
{
width:30%;
}
#TestName
{
width:40%;
}
#TestNumber
{
width:30%;
}
#heading
{
height:70px;
}
.title
{
text-align:center;
}
.Data
{
border-left:none;
border-right:none;
}
</style>
</head>
<body>
<div id="form">
<table>
<tr id="heading">
<td id="Logo">LOGO GOES HERE</td>
<td id="TestName">TEST NAME</td>
<td id="TestNumber">TEST NUMBER</td>
</tr>
</table>
<table id="CommonData">
<tr>
<td class="field">CLIENT:-</td>
<td class="data"></td>
<td class="field">SITE:-</td>
<td class="data"></td>
<td class="field">Contract NO:-</td>
<td class="data"></td>
</tr>
<tr>
<td class="field">DUTY:-</td>
<td class="data"></td>
<td class="field">TAG No:-</td>
<td class="data"></td>
<td class="field">Loop No:-</td>
<td class="data"></td>
</tr>
<tr>
<td class="field">SYSTEM No:-</td>
<td class="data"></td>
<td class="field">SYSTEM REF:-</td>
<td class="data"></td>
<td class="field">DWG No:-</td>
<td class="data"></td>
</tr>
<tr>
<td class="field">CTP No:-</td>
<td class="data"></td>
<td colspan="4"></td>
</tr>
</table>
<table>
<tr class="title">
<td>INSTRUMENT / APPLIANCE</td>
</tr>
</table>
<table style="float:left;width:50%">
<tr>
<td colspan="2">INSTRUMENT DETAILS:</td>
</tr>
<tr>
<td>MANUFACTURER</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>SERIAL No:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>SIZE:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>SERVICE DATA SHEET REF:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>POWER SUPPLY:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>MODEL NO:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>IP RATING:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>RANGE/SPAN</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
</table>
<table style="float:right; width:50%">
<tr>
<td>INSTRUMENT TYPE</td>
<td>TICK BOX</td>
</tr>
<tr>
<td>PROXIMITY SWITCH</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>LIMIT SWITCH</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>FLOAT SWITCH</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>ULTRASONIC</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>THERMOCOUPLE</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>PRESSURE SWITCH</td>
<td><input type="text" name="blah" style="width:100%"/></td>f
</tr>
<tr>
<td>TEMPERATURE SWITCH</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>FLOW SWITCH</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>CONDUCITIVITY METER</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>TURBIDITY METER</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>CHEMICAL RESIDUAL ANALYSER</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>FLOW METER</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>PH METER</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
</table>
<table>
<tr class="title">
<td>MONITOR / CONVERTER</td>
</tr>
<table>
<table>
<tr>
<td>PLANT UNIT:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
<td>INSTRUMENT TYPE:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>SERIAL No:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
<td>SPAN:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<tr>
<td>POWER SUPPLY:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
<td>OTHER:-</td>
<td><input type="text" name="blah" style="width:100%"/></td>
</tr>
<table>
</body>
</html>
Simplify your table structure. If possible, use a single table, with one item on one row—there is normally no need to simulate printed forms (where you try to put everything on one sheet of paper) when designing a web form. Don’t use all uppercase, and put heading-like items in bold to clarify the structure of the form. Do not set widths for cells—it is part of the basic benefits of using tables that you can leave width allocation to browsers.
Your problems with borders are just one symptom of too complicated a design. When using a single table, adjacent browsers collapse when you just set
cellspacing=0in thetabletag orborder-collapse: collapsein CSS.