开发者

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜