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。

表格布局：改进设计？

2 个答案: