How could I format a <ul> or <ol> tree into 2 columns using CSS?

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Man-wai Chang - 24 Apr 2007 06:42 GMT

A 2 columns x 10 rows matrix input form

<ul>
<li>
<ul>
<li>item name 1
<li><input type="textbox" name="input_col_1_row_1">
<li><input type="textbox" name="input_col_1_row_2">
</ul>
<li>
<ul>
<li>item name 2
<li><input type="textbox" name="...">
<li><input type="textbox" name="....">
</ul>
:
:
<li>
<ul>
<li>item name 20
<li><input type="textbox" name="input_col_2_row_9">
<li><input type="textbox" name="input_col_2_row_10">
</ul>
</ul>

Or should I just use plain <table> for this kind programming stuffs?

Signature

iTech Consulting Services Limited
Expert of ePOS solutions
Website: http://www.itech.com.hk (IE only)
Tel: (852)2325 3883 Fax: (852)2325 8288

Reply to this Message

Jukka K. Korpela - 24 Apr 2007 07:36 GMT

Scripsit Man-wai Chang:

> A 2 columns x 10 rows matrix input form

Why? What's the real page like? URL?

For usability and accessibility, we should normally follow the principle of
having one input item and its label, associated with <label> markup, on one
line.

> <ul>

Why are you using a list if you think it's a matrix? A list is logically a
special case of a matrix (a one-column matrix), but you are referring to two
columns.

> <ul>
> <li>item name 1
> <li><input type="textbox" name="input_col_1_row_1">
> <li><input type="textbox" name="input_col_1_row_2">
> </ul>

And why is _this_ a list? And it has three components, not two. There is no
label for either of the input items. If you think how you would use <label>
for them, you'll see one reason for following the above-mentioned principle.

Each input item should have a label of its own. Besides, you should use
valid markup (type="textbox" isn't valid), and you should set the size="..."
attribute in input fields, since that's the best way to suggest a suitable
visible width. (CSS has no unit corresponding to the average width of
characters.)

> Or should I just use plain <table> for this kind programming stuffs?

This has nothing to do with programming.

If the list markup is logical in a case like this, then table markup would
be even more logical, since it involves a columnwise association as well.

But you haven't revealed any specifics.

Signature

Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / April 2007

How could I format a <ul> or <ol> tree into 2 columns using CSS?