Tabular layout: improve design?
I'm designing a form: image and code below. There are about 30 more sections like this, and I just need the inputs (right) to align to the list (center). What's the best way to do this? Can I just alter my table HTML to make it work?
Layout http://img85.imageshack.us/img85/2199/screenshot20091227at719.png
<table border="1">
<thead>
<tr>
<th>Category</th>
<th>Risk Factors</th>
<th>Hours per Day</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<strong>Repetition</strong>
<p>Finger, Wrist, Elbow, Shoulder or Neck Motions</p>
</td>
<td>
<ol>
<li><strong>Identical or Similar Motions Performed Every Few Seconds</strong><br />Motions or motion patterns that are repeated every 15 seconds or les. (Keyboard us is scored below as a separate risk factor.)</li>
<li><strong>Insensitive Keying</strong><br />Scored Separately from other repetitive tasks in the repetition category and includes steady pace as in data entry.</li>
<li><strong>Intermittent Keying</strong><br />Scored Separately from other repetitive tasks. Keyboard or other input activity is regularly alternated with other activities for 50 to 75 percent of the work.</li>
</ol>
</td>
<td>
<input autocomplete="off" size="2" type="text" name="a_1" id="a_1" class="text-input" value="<?php print $this->validation->a_1?>"/>
<input autocomplete="off" size="2" type="text" name="a_2" id="a_2" class="text-input" value="<?php print $this->validation->a_2?>"/>
<input autocomplete="off" size="2" type="text" name="a_3" id="a_3" class="text-input" value="<?php print $this->validation->a_3?>"/>
</td>
</tr>
<开发者_JS百科/tbody>
</table>
I think you will need to use distinct rows in the table for each line. For the first column, you can use "rowspan=3" to have that column flow over all 3 rows.
You can break that down into a 4x3 table, with the left side having just 2 rows, the second having a rowspan=3
. That would probably end up looking the way you wanted.
To get your horizontal dividers in there, you may want to use colgroup
to group your columns; this allows you to attach borders. By the same token, you can format the white row as a THEAD
and the grey part as a TBODY
.
精彩评论