表格佈局：改進設計？

Question

我正在設計一個表單：下面的圖像和代碼。還有大約30個這樣的部分，我只需要輸入（右）與列表（中心）對齊。什麼是最好的方法來做到這一點？我可以修改我的表格HTML來使其工作嗎？

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

Answer 1

我想你需要在表格中爲每一行使用不同的行。對於第一列，可以使用「rowspan = 3」使該列在所有3行上流動。

Answer 2

可以打破下來到一個4x3的表，與具有僅有2排左側，第二有rowspan=3。那可能最終會以你想要的方式尋找。

要獲得您的水平分隔線，您可能需要使用colgroup來分組您的列;這使您可以附加邊框。同樣，您可以將白色行格式化爲THEAD，將灰色部分格式化爲TBODY。