tags:

views:

48

answers:

2

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

   <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>
    </tbody>
   </table>
A: 

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.

Carl Smotricz
+1  A: 

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.

Ed Schembor