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

[Man-wai Chang]

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 <tablefor this kind programming stuffs?

--
iTech Consulting Services Limited
Expert of ePOS solutions
Website: http://www.itech.com.hk (IE only)
Tel: [phone] Fax: [phone]

[Jukka K. Korpela]

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 <labelmarkup, 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 <tablefor 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.

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

[Jukka K. Korpela]

Scripsit Man-wai Chang:

I am just curious about the possibility of using CSS to layout an
input form which consist of repeating groups of labels+textbox

I'm not, because it's not something that should be done in situations where
there are several textboxes per label.

In CSS terms, the best approach to this wrong problem would be the use of
table-related values for the display property. That's not supported by IE.
Even if it were, it would be odd to resist the idea of using a table for
tabular data in markup and then use CSS to make the stuff look like a table.

For a more reasonable idea of having one label and one input element per
line in a tabular manner (in two columns, really), there are many possible
approaches. You could play with float: left or with positioning. But why? If
it's logically a matrix with texts in one column and associated input fields
in another column, why wouldn't you make it a table in markup?

(attached a picture).

You thereby prevented many people from seeing your message at all, because
servers may filter out messages containing binary data (at least in
non-binary groups).

Never post an image in a comp.* group. Post a URL instead. If needed, first
upload the material onto a web server. (You should be able to do that,
especially since you ask in a www related group.)

I wonder whether it will be easier do it in CSS

Easier than what?

so that the PHP codes would not mingle with the layout stuffs.

You didn't mention anything about PHP previously, and I don't see how it
relates.

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

[rAzZbAr]

On Apr 24, 4:41 am, "Jukka K. Korpela" <[e-mail]:

Scripsit Man-wai Chang:

[...]

so that the PHP codes would not mingle with the layout stuffs.

You didn't mention anything about PHP previously, and I don't see how it
relates.

It relates if what you're asking is "would it be easier to produce
This layout, or That layout in PHP?".

I'd think it'd be easier for a PHP programmer to code a function that
outputs a table in HTML than
CSS. For that matter, why are you using PHP to generate *layout*?